Broken css3d renderer in Safari (r150-r155) about three.js HOT 13 CLOSED

This issue is fixed in iOS 16 and iOS 17 will be released next month. The adoption rate of iOS 16 is as follows:

• 90 % of all devices introduced in the last four years use iOS 16.
• 81 % of all devices use iOS 16.

These data are from May 30, 2023 and directly from Apple: https://developer.apple.com/support/app-store/

Sorry, but we will not provide a fix for this in order to support older Apple devices. If you still need to support them, please use an older release of three.js or a custom version of CSS3DRenderer.

from three.js.

@yomotsu Are you able to check @arslc's live example (https://jsfiddle.net/4937qkhf/) in Safari? Is the quad centered on your device?

from three.js.

Thanks for the detailed report.
I tried the live example (https://jsfiddle.net/4937qkhf/) in Safari, but I can't reproduce the problem.
Is there any missing to reproduce?

in Desktop Safari 16.5

in iOS Safari 16.5.2

from three.js.

@arslc Is your page zoom set to 100%?

from three.js.

I'm on macOS 13.4.1 and test with Safari 16.5.2. The live example looks in Safari like Chrome. Meaning the red square is exactly centered.

What version of macOS and Safari are you using?

from three.js.

Hm, weird...

• macOS 12.6.6 | Safari 15.6.1

I also tried on my iPhone (iOS 15.3.1) and see exactly the same problem

r149	r150-r155

I got this results using same code

I also noticed a relationship between window size and offset size. When changing the height of the window - offset is stronger. But the most interesting thing about this is that in the inspector the position of the square shows correctly, both effects can be seen below:

from three.js.

Okay, I tried to make some changes to that code.

If I comment out the line or change the value to 50%, then it starts centering correctly and works as it should.

line 109 in /three/examples/jsm/renderers/CSS3DRenderer.js

viewElement.style.transformOrigin = '0 0'; // <-- disable this line

or set 50%

viewElement.style.transformOrigin = '50% 50%';

I don't know if that functionality will work because of such changes, because did not check in detail and this is the first attempt to find out what's wrong

Results in inspector:

from three.js.

transform-origin should be supported in Safari: https://caniuse.com/?search=transform-origin

Does it work if you keep the line as it is but add the following:

viewElement.style.transformBox = 'fill-box';

from three.js.

No, unfortunately it doesn't change anything.

Yes, Safari supports transform-origin, so I can set any supported values like:

• center center
• top center
• top center
• 10% 20%
• 200px 100%
• etc.

but any value other than center center/50% 50% moves this cube from the center.

Also changing transform-origin does nothing in google chrome and my div always centred

from three.js.

@WestLangley yes, of course my zoom is 100%

Guys, i tried out another:

• Simulator iPhone 14 Pro (iOS 16.2) and real iPhone 12 mini (iOS 16.3) – All right

Simulator (16.2)	Real (16.3)

• Real MacBook Pro (macOS 12.5.1/Safari 15.6.1) - Same problem

• Real iPhone 11 (Safari 15.6.1/Google chrome v115.0.5790.130) - Same problem

Safari	Chrome

• Browserstack Safari iOS 14/iOS 15.4 and Browserstack Chrome (iOS 14.7) - Same problem

Safari (iOS 14)	Chrome (iOS 14.7)	Safari (iOS 15.4)

• Browserstack Safari iOS 16.2 - All right

from three.js.

It seems the Safari issue has been fixed since iOS 16 (and newer version of macOS).

from three.js.

What about Google Chrome and Google App on iOS < 16?

It's weird...

from three.js.

Chrome like all other browsers on iOS are based on Webkit (so the browser engine of Safari).

from three.js.