lzy100p Posted January 7, 2023 Share Posted January 7, 2023 Using safari to access the page, the elements on the page will appear black border Reproduction method. 1.Visit the test url and wait for it to finish loading 2. Exit safari and run a large application such as a game 3. Quit the game and reopen safari, random elements on the page will appear black border Not every time it appears, you need to try more times This problem did not exist before, seems to be after ios16 will have (not sure) My phone model is iphone 13 Does anyone know what is going on? Thank you test url https://h5.legions.tech/flight/test.html Link to comment Share on other sites More sharing options...
lzy100p Posted January 7, 2023 Author Share Posted January 7, 2023 It should be related to translate3d (force3D) Does this property not work on ios anymore? Link to comment Share on other sites More sharing options...
GreenSock Posted January 7, 2023 Share Posted January 7, 2023 I'm pretty confident this has absolutely nothing to do with GSAP. Safari is just a very buggy browser when it comes to graphics rendering. Here are some things you can try: Set will-change: transform on the affected elements (in the CSS) Maybe set gsap.config({force3D: false}) (but that really shouldn't be necessary) Link to comment Share on other sites More sharing options...
lzy100p Posted January 7, 2023 Author Share Posted January 7, 2023 Yes, this should be a bug in Safari This problem only seems to occur with elements created by document.createElement will-change and force3D: false These two methods have been tried and still have black border It seems like this should be a big bug, but I searched the Internet and did not find a similar problem Do you have any other suggestions? Be able to solve this problem thanks Link to comment Share on other sites More sharing options...
GreenSock Posted January 7, 2023 Share Posted January 7, 2023 Yeah, browsers update their rendering algorithms sometimes and don't really tell anyone. It's really annoying, I know. Other ideas: Try giving them a very slight rotation so that they're not perfectly aligned with the pixel grid. Change the way you're scaling so that the native image size is larger and you never have to scale above 1. So for example, if you're scaling from 1 to 1.1 right now, make your native image scaled 1.1, and then start with it at like 0.9 and scale to 1. That way, the browser doesn't have to stretch pixels larger than the native size. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now