The only change I made was in the CSS at the bottom, I switched the
right: 0 !important;
left: auto !important;
right: auto !important;
left: 0 !important;
so my overlay would show on the left side instead of the right side. On my desktop, laptop, and Nexus tablet it worked great. When I view my page on my iphone, the overlay ignores the CSS and comes down in the middle of the page, and does not match its height to the screen height. Just to test, I visited
To give more info, I am using an iPhone 4 (not 4s) running iOS 5.1.1
Just now I also viewed it on an iPad 3 and it looks perfect there too (well not perfect on the iPad it doesn't set its height to full screen height, but that is the same as the demo site) - so it is ONLY occuring on the iPhone.
Unfortunately without being able to see your site, an example, or code it will be hard to help. Browsers act differently - iOS safari is relatively strict so I would assume there is an error other browsers are correcting or ignoring that iOS safari is not.
Leave a comment on bjthomps24's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic