[Solved] Splitter does not work correctly with CSS zoom property

[Monja]

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.

[Dimo]

Hello Monja,

Thanks for the runnable REPL test page.

Similar to the popup positioning scenario, I must admit that CSS zoom styles are currently not supported for Splitter pane resizing. If you are using a Splitter-based layout, I hope you can apply the zoom style on the content inside the Splitter, rather than the Splitter itself.

Out of curiosity, can you describe how does CSS zooming fit into your app UX and what is its purpose?

Regards,
Dimo
Progress Telerik

[Monja]

In our case, the goal is to provide a user-adjustable scaling factor for the entire application UI and persist that preference. This allows users to choose a comfortable scale level that is automatically restored when they return to the application from any device.

Browser zoom is not a suitable solution for this scenario because it cannot be controlled, saved and restored as part of the user's settings. That's why we're currently using CSS zoom to scale the whole application.

[Dimo]

Thanks for the insights. If applicable, you can consider an alternative approach that does not rely on CSS zooming (or at least not a global one). Instead, users can select an app setting that affects the font size and some layout dimensions. You can integrate the Telerik components into this algorithm with the help of CSS theme variables.