When zooming to 90% in Chrome, controls lose their margins - ExtJs 6.6.0 classic

[bogc]

To reproduce, go to: http://examples.sencha.com/extjs/6.6...#form-register in Chrome (I used the Crisp theme), change the zoom to 90%. some of the margins disappear.

Is there a way to prevent this?


100%
100_percent.PNG

90%
90_percent.PNG

Thanks

[hakimio]

Browser zoom is not supported by ExtJS. You should prevent it.

[bogc]

There seems to be no way to 100% prevent zooming for a desktop browser (at least zooming out). Also I do not want to prevent zooming in. I use it myself for some of the sites. Based on the research I've done Chrome has problems rendering borders that are 1px when going to a zoom level less than 100%. Some people recommended redefining these borders using "thin" instead of 1px.

[matei]

some for me, but for zoom at 175% for some themes (triton), or 110% and each second some after for my theme, but still don't understand why...

https://examples.sencha.com/extjs/6....#form-checkout (zoom at 175%) - only border bottom is not visible for some fields.

[aallord]

Since browsers are responsible for rendering zoom factors this is difficult to control in the best case situations.

You can use the W3C - CSS Device Adaption Module Level 1 (current state is Working Draft). It will be subject to change without notice and some changes may break what you implement.

In this working draft you can set/control using 'zoom', 'min-zoom', 'max-zoom', 'user-zoom' and the 'orientation' descriptors to help control what users can do with zoom. Although this is moving forward in helping, no matter what you set you will be dependent upon how the browser decides to render it.