Geek Answers Handbook

IPhone: fixed position div invisible

I have a Joomla 3 website at http://www.getdripped.com/dev , for which I create a mobile menu. This works fine for me on desktop computers, but when I try to view it on my iPhone, the menu slides but is invisible. I can still click blindly, and the links do work, but are completely invisible. What is even more strange is that when I press the button again to close the menu, it suddenly appears for a short second before closing the drawer. I'm not sure what the problem is, can anyone help?

My iPhone is running iOS 8.2 and I was viewing it in Safari. When I browse the iPhone Chrome app, everything runs smoothly. Very confused here ...

+4
source share
1 answer

Your problem is very similar to other problems discussed in iOS 8. The hack option -webkit-transformalso seems to solve this problem.

Adding -webkit-transform: translateZ(0);to the selector body.openseems to solve the problem.

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

iOS 8 seems to have some splitting issues that 3D transforms can counteract. This seems to be due to the use -webkit-overflow-scrolling: touch;of the OP as it is detected.

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

+4
source

More articles:


All Articles