-
-
Notifications
You must be signed in to change notification settings - Fork 35.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Broken css3d renderer in Safari (r150-r155) #26529
Comments
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? |
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.
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: IMG_3207.mp4https://github.com/mrdoob/three.js/assets/117154548/3ae6cb96-680f-434c-8310-fe7a1f525fe0
|
Does it work if you keep the line as it is but add the following: viewElement.style.transformBox = 'fill-box'; |
No, unfortunately it doesn't change anything. Yes, Safari supports
but any value other than Also changing |
@yomotsu Are you able to check @arslc's live example (https://jsfiddle.net/4937qkhf/) in Safari? Is the quad centered on your device? |
Thanks for the detailed report. in Desktop Safari 16.5in iOS Safari 16.5.2 |
@arslc Is your page zoom set to 100%? |
@WestLangley yes, of course my zoom is 100% Guys, i tried out another:
|
It seems the Safari issue has been fixed since iOS 16 (and newer version of macOS). |
Chrome like all other browsers on iOS are based on Webkit (so the browser engine of Safari). |
This issue is fixed in iOS 16 and iOS 17 will be released next month. The adoption rate of iOS 16 is as follows:
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 |
Description
Hey every one!
Firstly: thx for awesome 3d library!
Secondly: starting with release 150 css3drenderer in Safari browser was broken. I think this PR (#25508) was the source of the bug migrating for 5 releases now.
I haven't looked into this issue in detail, but rolling back to 149 release fixes it.
I made a minimally reproducible example on jsfiddle, take a look at it via google chrome as well as safari and compare.
This example shows slight shifting of elements and incorrect rendering. But if the created application is complex, then these shifts will become catastrophic.
Perhaps I misunderstood something and I forgot to do something, but it's strange that everything is fine in google chrome. And also when you roll back to version 149 everything becomes normal
Reproduction steps
Code
Live example
Screenshots
Version
150-155
Device
Desktop
Browser
Chrome, Safari
OS
MacOS
The text was updated successfully, but these errors were encountered: