How To Fix Random Disappearing Of HTML Elements On iPhone/iPad

Context:
You're developing a web app.
Problem: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.
Possible Causes:Mobile Safari does not recreate elements with position : fixedMobile Safari does not render the elements that are offscreen.Mobile Safari misrenders elements using -webkit-overflow-scrolling: touch Solution: Trick the Mobile Safari browser to use hardware acceleration more effectively by apply this global css
*:not(html) { -webkit-transform: translate3d(0, 0, 0); } Side Effects: 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.
Note: This is not a nice solution at all, but until there's a fix from Mobile Safari browser, I can't find a better…
Problem: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.
Possible Causes:Mobile Safari does not recreate elements with position : fixedMobile Safari does not render the elements that are offscreen.Mobile Safari misrenders elements using -webkit-overflow-scrolling: touch Solution: Trick the Mobile Safari browser to use hardware acceleration more effectively by apply this global css
*:not(html) { -webkit-transform: translate3d(0, 0, 0); } Side Effects: 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.
Note: This is not a nice solution at all, but until there's a fix from Mobile Safari browser, I can't find a better…