Jump to content
Search Community

ios16 safari black border bug

lzy100p test
Moderator Tag

Recommended Posts

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

 

 

 

aaa.jpg

Link to comment
Share on other sites

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: 

  1. Set will-change: transform on the affected elements (in the CSS)
  2. Maybe set gsap.config({force3D: false}) (but that really shouldn't be necessary)
Link to comment
Share on other sites

 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

 

aaa.jpg

Link to comment
Share on other sites

Yeah, browsers update their rendering algorithms sometimes and don't really tell anyone. It's really annoying, I know. 

 

Other ideas: 

  1. Try giving them a very slight rotation so that they're not perfectly aligned with the pixel grid.
  2. 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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...