How To Fix Random Disappearing Of HTML Elements On iPhone/iPad
Context:You're developing a web app.
- On your desktop, it looks great. On the iPhone/iPad simulator on your desktop, it looks great.
- On the actual iPhone/iPad, however, some elements just don't show up or show up out of place.
- Mobile Safari does not recreate elements with position : fixed
- Mobile Safari does not render the elements that are offscreen.
- Mobile Safari misrenders elements using -webkit-overflow-scrolling: touch
Trick the Mobile Safari browser to use hardware acceleration more effectively by apply this global css
-webkit-transform: translate3d(0, 0, 0);
- Some other elements might become misaligned after the css fix, but it should be easier and more possible to restyle these elements than to fix the original rendering problem, unless you know how of course.
- Performance might be affected.
- This is not a nice solution at all, but until there's a fix from Mobile Safari browser, I can't find a better way. If you know a better way, please suggest.
- This is not a guaranteed fix. It works for me. It may not work for you.
- This is written in Nov-2017. Things might change by the time you read this post.