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!

            <TelerikGridLayout Class="grid-layout">
                <GridLayoutRows>
                    <GridLayoutRow Height="28px" />
                    <GridLayoutRow />
                    <GridLayoutRow />
                </GridLayoutRows>
                <GridLayoutItems>
                    <GridLayoutItem Row="1">
                        @if (Groups?.Count > 0)
                        {
                            <TelerikButton OnClick="@OnCreate"
                                           Class="gsi-width-100pct gsi-padding-0">
                                Create New
                            </TelerikButton>
                        }
                    </GridLayoutItem>
                    <GridLayoutItem Row="2">
                        <div>
                            <div class="gsi-background-color-light" style="height: 41px; display:flex;justify-content:space-between;">

                                <div class="align-self-center gsi-font-kendo gsi-margin-0">
                                    Patient Filters
                                </div>
                                <TelerikButton FillMode="Clear"
                                               Class="gsi-border-width-0 gsi-border-color-white gsi-padding-8"
                                               Icon="@(Telerik.SvgIcons.SvgIcon.Filter)"
                                               OnClick="@GridFilterExpandCollapse" />

                            </div>

                            <TelerikAnimationContainer @ref="@FilterContainer"
                                                       Class="gsi-background-color-light gsi-margin-5 k-rounded-0"
                                                       Width="100%"
                                                       Height="100vm">

                                <TelerikStackLayout Spacing="1px" Class="gsi-margin-5">
                                    <TelerikCard Width="33vh">
                                        <CardBody>

                                            @if (SessionOption1Items?.Count > 0)
                                            {
                                                <div class="form-group-short gsi-max-width-250">
                                                    <label class="col-form-label">@SessionOption1Template.Name</label><br />
                                                    <TelerikDropDownList Data="@SessionOption1Items"
                                                                         @bind-Value="@SessionOptionIndex1"
                                                                         TextField="Name" ValueField="Id" />
                                                </div>

                                                @if (SessionOption2Items?.Count > 0)
                                                {
                                                    <div class="form-group-short gsi-max-width-250">
                                                        <label class="col-form-label">@SessionOption2Template.Name</label><br />
                                                        <TelerikDropDownList Data="@SessionOption2Items"
                                                                             @bind-Value="@SessionOptionIndex2"
                                                                             TextField="Name" ValueField="Id" />
                                                    </div>
                                                }
                                            }
                                            else
                                            {
                                                <small>No Defined Filter</small>
                                            }

                                        </CardBody>
                                    </TelerikCard>
                                    <TelerikCard Width="33vh">
                                        <CardBody>

                                            <div class="form-group-short gsi-max-width-250">
                                                <label class="col-form-label">Date Range</label><br />
                                                <TelerikDropDownList Data="@DateRangeOptions"
                                                                     @bind-Value="@DateRangeIndex"
                                                                     TextField="Name" ValueField="Id" />
                                            </div>

                                            <div class="form-group-short gsi-max-width-250">
                                                <label class="col-form-label">Group Behavior</label><br />
                                                <TelerikDropDownList Data="@GroupFilterOptions"
                                                                     @bind-Value="@GroupFilterIndex"
                                                                     TextField="Name" ValueField="Id" />
                                            </div>

                                        </CardBody>
                                    </TelerikCard>
                                    <TelerikCard Width="34vh">
                                        <CardBody>

                                            <div class="form-group-short gsi-max-width-250">
                                                <label class="col-form-label">Status</label><br />
                                                <TelerikDropDownList Data="@IsActiveFilterOptions"
                                                                     @bind-Value="@IsActiveIndex"
                                                                     TextField="Name" ValueField="Id" />
                                            </div>

                                            <div class="form-group-short align-bottom">
                                                <label class="col-form-label gsi-color-white">Apply Filter</label><br />
                                                <TelerikButton OnClick="OnFilterChanged"
                                                               Class="gsi-background-color gsi-color-white gsi-width-100pct">
                                                    Apply Filter
                                                </TelerikButton>
                                            </div>
                                        </CardBody>
                                    </TelerikCard>
                                </TelerikStackLayout>

                            </TelerikAnimationContainer>
                        </div>
                    </GridLayoutItem>
                    <GridLayoutItem Row="3">
                        <TelerikGrid Data=@Sessions
...

                <div class="gsi-background-color-light" style="height: 41px; display:flex;justify-content:space-between;">

                    <div class="align-self-center gsi-font-kendo gsi-margin-0">
                        Patient Filters
                    </div>
                    <TelerikButton Id="filterChevronButton"
                                   FillMode="Clear"
                                   Class="gsi-border-width-0 gsi-border-color-white gsi-padding-8"
                                   Icon="@( FilterVisible? Telerik.SvgIcons.SvgIcon.Filter : Telerik.SvgIcons.SvgIcon.Filter)"
                                   OnClick="@(() => ExpandCollapse())" />

                </div>

                <TelerikAnimationContainer @ref="@AnimContainer"
                                           Class="gsi-background-color-light gsi-margin-5 k-rounded-0"
                                           Width="100%"
                                           Height="100vm">

                    <TelerikStackLayout Spacing="1px" Class="gsi-margin-5">
                        <TelerikCard Width="25vh">
                            <CardBody>

                                <div class="form-group-short">
                                    <label class="col-form-label" for="firstName">First Name</label><br />
                                    <TelerikTextBox @bind-Value="@FirstNameFilter"
                                                    Name="firstName"
                                                    Placeholder="-No Filter-"
                                                    OnChange="@(x => OnFilterChanged(nameof(FirstNameFilter), x))">
                                    </TelerikTextBox>
                                </div>

        private async Task OnFilterChanged(string propertyName, object newValue)
        {
            await GetPatients();
            ExpandCollapse(false);
        }

        private async Task OnFilterChanged(string propertyName, object newValue)
        {
            object existingValue = this.GetPropertyValue(propertyName);
            if (newValue != existingValue)
            {
                this.SetPropertyValue(propertyName, newValue);

                await GetPatients();
                ExpandCollapse(false);
            }
        }

    public async void ExpandCollapse(bool? filterVisible = null)
    {
        if (filterVisible.HasValue)
        {
            await AnimContainer.ToggleAsync();
            FilterVisible = filterVisible.Value;
        }
        else
        {
            await AnimContainer.ToggleAsync();
            FilterVisible = !FilterVisible;
        }
    }