We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Zoeken in Support

Vermijd ondersteuningsscams. We zullen u nooit vragen een telefoonnummer te bellen, er een sms naar te sturen of persoonlijke gegevens te delen. Meld verdachte activiteit met de optie ‘Misbruik melden’.

Meer info

Deze conversatie is gearchiveerd. Stel een nieuwe vraag als u hulp nodig hebt.

-webkit- vendor prefix css class is rendered

  • 1 antwoord
  • 1 heeft dit probleem
  • 4 weergaven
  • Laatste antwoord van cor-el

more options

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:`

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:`

Gekozen oplossing

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
)

Dit antwoord in context lezen 👍 0

Alle antwoorden (1)

more options

Gekozen oplossing

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
)