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 : fixed
  • Mobile 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 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.


Reference:



























Comments

  1. You say your previous tear downs where surprisingly popular, considering that your writing is a surprisingly good read for such a boring subject

    ReplyDelete

Post a Comment

Popular posts from this blog

How To Set Up Quasar v0.14 On A Laravel+Vue Framework

How To Set Up Quasar v0.13 On A Laravel(5.4)+Vue Framework

How To Set Up NodeJs And Npm On Linux

How To Set Up PHP on Ubuntu

How To Set Up A Vue Web App Development Environment

How To Set Up WordPress On Google App Engine (GAE)

What Is Markdown ?

How To Set Up The Nginx Web Server On Ubuntu