Menu
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...
275
position: fixed doesn't work on iPad and iPhone.
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located.
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.
95
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
