iPhone 6 Plus position fixed paint bug

349 Views Asked by At

iPhone 6 Plus with iOS 9.3.4 running Safari

I have a side-menu on website mobile version, which is displayed as position: fixed with all respect to iOS (like translate3d etc.). It is a simple element with following style:

.sidebar {
   display: none;
   position: fixed;
   overflow: hidden;
   z-index: 150;

   top: 0; left: 0;
   height: 100%;
   width: 250px;

   background: #f0f0f0;
   transform: translate3d(0px, 0px, 0px);
}

When I display it via JS (simply modifying display from none to block), and then I change the orientation to landscape, I get the strangest behaviour: all the texts and native elements (like inputs) are never rendered. Its just empty gray background with only one image of custom radiobutton hanging in the middle. Once I toggle the orientation back, it is being painted fine.

The bug only happens on iPhone 6 Plus (never could reproduce it on iPad or iPhone 6(s)).

0

There are 0 best solutions below