CODEWITHSUNDEEP
javascripthtmlioscssmobile-safari
Nick Winner
Nick Winner

Reputation: 261

iPhone: Fixed position Div invisible

I have a Joomla 3 site at http://www.getdripped.com/dev which I am building a mobile menu for. I have it working well on desktops, but when I try to view it on my iPhone the menu slides in but is invisible. I can still blindly tap and the links do work, but its completely invisible. What's even weirder, when I click the button again to close the menu, it suddenly shows up for a brief second before the drawer closes. I'm not sure what the problem is, can anyone help?

My iPhone is running iOS 8.2, and I previewed in Safari. When I preview in the iPhone Chrome app, everything works swimmingly. Very confused here...

Upvotes: 5

Views: 1556

Answers (1)

Alexander O'Mara
Alexander O'Mara

Reputation: 60527

Your issue is very similar to other issues seen in iOS 8. A variation of the -webkit-transform hack seems to solve this problem as well.

Adding -webkit-transform: translateZ(0); to the body.open selector seems to solve the issue.

body.open {
    -webkit-transform: translateZ(0);
}

iOS 8 appears to have some layering issues which 3D transforms are able to counteract. This one appears to be related to the use of -webkit-overflow-scrolling: touch; as the OP discovered.

Add this to the list of weird bugs in iOS 8.

Upvotes: 7

Related Questions