1584881 - support -webkit-transform-origin-x/y for webcompat reasons?

Status: NEW

(Core :: CSS Parsing and Computation, enhancement)

Description

[Karl Dubost💡 :karlcow]

0. On Firefox fenix Android
1. Go to https://www.teletrader.com/?ts=1568730186442

so Firefox implements -webkit-transform: scale(0.65); for webcompat reason. It seems
-webkit-transform-origin-x, -webkit-transform-origin-y are not implemented.

This rule is a kind of emulation of a zoom: 0.65 (not implemented in Firefox too).

if we do

/* ipad.css | https://www.teletrader.com/Layout/ipad.css */

@media only screen and (orientation: portrait) {
  body {
    transform-origin: 0 0;
  }
}

The site is fixed.

note that they should change too

/* ipad.css | https://www.teletrader.com/Layout/ipad.css */

@media only screen and (orientation: portrait) {
  body {
    transform-origin: 0 0;
  }
}

@media only screen and (orientation: portrait) and (max-device-width: 800px) {
  body {
    transform-origin: 0 0;
  }
}

And the best would be to do:

/* ipad.css | https://www.teletrader.com/Layout/ipad.css */

@media only screen and (orientation: portrait) {
  body {
    /* -webkit-transform: scale(0.65); */
    /* -webkit-transform-origin-x: 0px; */
    /* -webkit-transform-origin-y: 0px; */
    transform-origin: 0 0;
    transform: scale(0.65);
  }
}

@media only screen and (orientation: portrait) and (max-device-width: 800px) {
  body {
    /* -webkit-transform: scale(1.3); */
    /* -webkit-transform-origin-x: 0px; */
    /* -webkit-transform-origin-y: 0px; */
    transform-origin: 0 0;
    transform: scale(1.3);
  }
}

It had been supported in the past when Firefox was using the unprefixing service.
https://bugzilla.mozilla.org/show_bug.cgi?id=1160281

But it's not used anymore.

A test case to illustrate:

data:text/html,<!doctype><p style="background-color: gold;-webkit-transform:scale(0.5);-webkit-transform-origin-x: 0;-webkit-transform-origin-y: 0">AAAAAAA</p>

This one is working in firefox -webkit-transform-origin: 0 0.

data:text/html,<!doctype><p style="background-color: gold;-webkit-transform:scale(0.5);-webkit-transform-origin: 0 0">AAAAAAA</p>

Comment 1

[Emilio Cobos Álvarez (:emilio)]

So this one is weird, because these properties are longhands, but transform-origin is a longhand as well...

Comment 2

[Mats Palmgren (inactive)]

FWIW, Chrome's usage counter for webkit-transform-origin-x is at 0.076879% and trending downwards.

Comment 3

[Karl Dubost💡 :karlcow]

I wonder if we could make the case to Chrome to stop supporting these.

Comment 4

[Mike Taylor [:miketaylr]]

(In reply to Karl Dubost💡 :karlcow from comment #3)

I wonder if we could make the case to Chrome to stop supporting these.

Philip, 0.07% is likely too high for removal, correct?

Comment 5

[Philip Jägenstedt [:foolip]]

0.07% is the ballpark of usage where we have successfully removed things. It comes down to what the effect of removing it would be, which is very different depending on the type of "API" and what kinds of fallbacks tend to be in place.

Would this be a trivial alias for something else, or how hard would it be to support?

Comment 6

[Mats Palmgren (inactive)]

It's now at 0.057488%.
I would expect that figure to include pages where the author is using it as fallback, so I expect the number of pages that are actually affected by not supporting -webkit-transform-origin-x/y to be much lower. (I suspect that the Chrome stats just counts valid declarations, please correct me if I'm wrong.)

Comment 7

[Philip Jägenstedt [:foolip]]

That's right, the metrics for CSS properties count successfully parsing:
https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/css/parser/css_property_parser.cc;l=92;drc=37aaaed4e1e12d7e05ddb898acc43c1abb56a24c

There aren't any automatically generated counters that try to figure out which properties end up actually affecting the page.

I think that taking a sample of HTTP Archive would be the best way to figure out how often use of -webkit-transform-origin-x actually matters.