![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
-webkit- vendor prefix css class is rendered
I have a special rule in my css to target a webkit webview on ios which has a layout rendering problem. This is a known issue. The only fix for this is adding this rule:
-webkit-transform: translate3d(0, 0, 0);
This gives some side effects in my apllication because the z-indexation is messed up. This was an acceptable trade-off when only webkit browsers are concerned.
Suddenly I see the side-effect occur in Firefox Quantum. It seems the css vendor-prefixed rule is also executed. I don't understand that. Isn't the browser supposed to only run it's own vendor prefixed classes? in this case the -moz- prefixed classes?
See the screenshot
Although only the `-webkit-transform` is defined is also shows the non-prefixed rule `transform:`
Solution choisie
There is this pref to honor CSS rules with a -webkit prefix:
- layout.css.prefixes.webkit
See also this old bug:
- bug 725299 - Wrong z-ordering with css 3d transforms using opacity and transform-style
(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)
Toutes les réponses (1)
Solution choisie
There is this pref to honor CSS rules with a -webkit prefix:
- layout.css.prefixes.webkit
See also this old bug:
- bug 725299 - Wrong z-ordering with css 3d transforms using opacity and transform-style
(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)