Hi,

I'm using the CSS zoom property to scale my website and noticed that the Telerik Splitter does not behave correctly when a zoom level is applied.

I've adjusted the Blazor Splitter demo to reproduce the issue. I simply added a css Class with the zoom property set and applied it to the TelerikSplitter Element. After that resizing of the the splitter panes by dragging the splitter handle is not possible anymore:

https://blazorrepl.telerik.com/cgYBGVEC17NDglUz26

Given that CSS zoom is supported by all major browsers according to Can I Use (https://caniuse.com/css-zoom), is the Splitter component expected to work correctly in a zoomed container, or is this currently a known limitation?

Thanks!

Edit:

This issue seems to affect not only the Splitter but also other draggable elements. For example, resizing Grid columns is affected as well.

Hi,

I'm using the CSS zoom property to scale my website and initially noticed that popup-based Telerik components (e.g. DropDownList) were misaligned.

After some investigation, I found that this happens when the zoom is applied to a root element that also contains the animation containers. The issue can be worked around by explicitly excluding .k-animation-container from the zoom and explicitly applying the zoom property to its child animation containers (.k-child-animation-container). After doing that, popup positioning appears correct again and content and popup contents are scaled correctly.

Given that zoom is supported by all major browsers according to Can I Use (https://caniuse.com/css-zoom), I'm wondering:

• Is CSS zoom officially supported by Telerik UI for Blazor?
• Is the need to handle .k-animation-container and its child contents separately expected behavior, or is there a better, recommended approach?

Thanks!

@page "/1"
@using Telerik.Blazor.Components
@using Telerik.DataSource;
@using Telerik.DataSource.Extensions;

<TelerikGrid TItem="Dictionary<string, object>"
             Pageable="true"
             Groupable="true"
             Sortable="true" OnRead="OnLoadData"
             Navigable="true"
             PageSize="10"
             SortMode="Telerik.Blazor.SortMode.Single"
             
             FilterMode="@Telerik.Blazor.GridFilterMode.FilterRow"
             Height="500px">
    <GridColumns>
        @foreach(var col in Columns)
        {
            <GridColumn Field="@col.Key" Title="@col.Key" FieldType="typeof(string)" />
        }
    </GridColumns>
</AgirhDataGrid>

@code {

    public List<KeyValuePair<string, string>> Columns { get; set; }


    private Task OnLoadData(GridReadEventArgs args)
    {
        var request = new DataSourceRequest
        {
            Groups = args.Request.Groups,
        };
        // GetData it's a System.DataTable 
        var dataSource = GetData.ToDataSourceResult(request);
        args.Data = dataSource.AggregateResults ?? dataSource.Data; 
        args.Total = dataSource.Total;
        return Task.CompletedTask;
    }
}

<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0"/>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.0" PrivateAssets="all"/>
<PackageReference Include="Telerik.FontIcons" Version="2.1.0" />
<PackageReference Include="Telerik.UI.for.Blazor" Version="5.0.1" />

@page "/AreaChartDemo"
@using Telerik.Blazor
@using Telerik.Blazor.Components

<TelerikChart>
    <ChartTooltip Visible="true"></ChartTooltip>
    <ChartTitle Text="Gross domestic product growth /GDP annual %/"></ChartTitle>
    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Area" Name="Chile" Data="@Data" Field="@nameof(ModelData.Series1)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Area" Name="India" Data="@Data" Field="@nameof(ModelData.Series2)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Area" Name="Haiti" Data="@Data" Field="@nameof(ModelData.Series3)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Name="foo" Data="@Data" Field="@nameof(ModelData.Idx1)" Margin="0" AutoFit="true" Padding="0"></ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Categories="@Categories"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartValueAxes>
        <ChartValueAxis AxisCrossingValue="@AxisCrossingValue">
            <ChartValueAxisLabels Format="{0}%"></ChartValueAxisLabels>
        </ChartValueAxis>
    </ChartValueAxes>

</TelerikChart>

@code {
    public class ModelData
    {
        public double Series1 { get; set; }
        public double Series2 { get; set; }
        public double Series3 { get; set; }
        public double Idx1 { get; } = 0.0;
    }

    public string[] Categories = new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };

    public object[] AxisCrossingValue = new object[] { -10 };


    public List<ModelData> Data = new List<ModelData>()
{
        new ModelData()
        {
            Series1 = 3.907,
            Series2 = 1.988,
            Series3 = -0.253
        },
        new ModelData()
        {
            Series1 = 7.943,
            Series2 = 2.733,
            Series3 = 0.362
        },
        new ModelData()
        {
            Series1 = 7.848,
            Series2 = 3.994,
            Series3 = -3.519
        },
        new ModelData()
        {
            Series1 = 9.284,
            Series2 = 3.464,
            Series3 = 1.799
        },
        new ModelData()
        {
            Series1 = 9.263,
            Series2 = 4.001,
            Series3 = 2.252
        },
        new ModelData()
        {
            Series1 = 9.801,
            Series2 = 3.939,
            Series3 = 3.343
        },
        new ModelData()
        {
            Series1 = 3.89,
            Series2 = 1.333,
            Series3 = 0.843
        },
        new ModelData()
        {
            Series1 = 8.238,
            Series2 = -2.245,
            Series3 = 2.877
        },
        new ModelData()
        {
            Series1 = 9.552,
            Series2 = 4.339,
            Series3 = -5.416
        },
        new ModelData()
        {
            Series1 = 6.855,
            Series2 = 2.727,
            Series3 = 5.59
        }
    };

}