CSS: `scale` not applied in WebKit browsers

[michaelthatsit]

unsure if this is an MRjs thing or a WebKit thing.

webkit browser (left) should look like Firefox (right).

[karlcow]

@michaelthatsit is there an online which can be accessed easily?

[michaelthatsit]

@michaelthatsit is there an online which can be accessed easily?

Sorry, not sure I understand. If you mean a working MRjs example you can checkout https://mrjs.io or https://volumetrics.io (the site in the screenshot)

[lobau]

This would be the simplest version https://volumetrics.io/static/iframe/

[karlcow]

@michaelthatsit is there an online which can be accessed easily?

Sorry, not sure I understand. If you mean a working MRjs example you can checkout https://mrjs.io or https://volumetrics.io (the site in the screenshot)

if I was writing correctly my sentences 🤦 Sorry about that. I wanted to understand what was not potentially working on WebKit to create a reduced test case and open a bug if necessary.

Thanks @lobau This is a good start for me to look at what could be wrong. https://volumetrics.io/static/iframe/

[michaelthatsit]

@karlcow no worries it was late evening for me, wasn't totally awake 😂

Thanks for looking into this! Hope to see more webXR support in webkit.

[hanbollar]

css

We're looking to replicate the following css in MRjs's mixed-reality setup

-webkit-transform: scale(2);

as

scale:2;

for our javascript handler

notes

Part of the problem is that in certain older webkit setups, if only scale is defined and not its webkit pair, then the scale property override doesnt show up in the getComputedStyle function return.

For that case, we'd just need users to also give us the webkit version and we'd need to interpret that as the regular scale css property.

Additionally, since we dont really case about the pure html output (since we're interpreting it into our threejs html setup) - we dont have to also mimic the scale css into the webkitTransform one

That is, we thankfully /dont/ need to do the following:

// Apply both the standard and the WebKit-specific transform
element.style.transform = 'scale(2)'; // --> this we already handle
element.style.webkitTransform = 'scale(2)'; // --> this we'll need to manually do

workaround

• interpret the webkit css properties as their general counterparts (in this case -webkit-transform: scale(2); as scale:2;)
• and cleanup the compStyle we use before using it to do modifications on the css

---

@karlcow :

• does this workaround make sense from your experience?
• and also do you know if there's a list of webkit-specific css and what it corresponds to in general css for browser compatibility (like in this case, scale vs -webkit-transform: scale(2);)? (no worries if not)

---

we can probably do this workaround for all cases where there's the webkit discrepancy, we'll just need to make sure we do it for transform /and/ all other cases where the discrepancy is important

i can start implementing a more general fix in MRjs based on that when it becomes higher priority