Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS: Replace non-standard zoom property

See original GitHub issue

Go to the showcase page in Firefox 71+: https://www.primefaces.org/showcase/ui/panel/accordionPanel.xhtml

In the console it reports:

This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”.

They are correct if you look here its a non standard CSS which used to be used to fix IE8 issues. https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

It should be replaced with:

transform: scale(1); /* Standard Property */
transform-origin: 0 0;  /* Standard Property */

Components affected:

Accordion
AutoComplete
Dialog
Forms
Menu
Paginator
Tabview
Tree
Omega Theme (@mertsincan)

Issue Analytics

State:
Created 4 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

metaxmxcommented, Apr 20, 2020

Hi, The transform: scale(1) creates a different “stacking context” for the HTML element, which will break the z-index comparison between elements inside the container element and those outside. The stacking contexts are explained here (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

In short, if you have a container element with a non-empty transform property, all z-index attributes of elements inside this container element will have only an effect among each other, but won’t have any effect against all elements outside this container element.

This is especially problematic, if you have backdrops from e.g. a modal dialog, which is placed as child-element of <body>, while the dialog itself (or any element which should be above the backdrop) is located inside the container lement (e.g. a TabView).

@melloware please have a look at this again, as the change introduced in 8.0 breaks z-index-based layouting concepts, e.g. #5675 Although the zoom: 1 wasn’t standard and did nothing in Firefox, at least it did not create a new stacking context and left the z-index usable.

I’m not sure, why the transform: scale(1) is there in the first place. It doesn’t seem to fulfil any purpose. If it’s really only for some old IE8 problems and you need to support it (although not even microsoft supports it any more), can’t you just keep the zoom if IE8 understands it? It won’t break code in newer browsers then … And if you don’t support IE8 any more, I believe you can just drop it altogether, can’t you?

0reactions

mellowarecommented, Mar 9, 2020

@cocorossello Feel free to investigate. Zoom is not supported on Firefox. So you may have to implement some custom styles for this to work without using zoom CSS.