February 17th, 2014, 09:18 PM
iOS WebKit Orientation Change Breaks Layout
I never thought I'd be writing about something like this, having joined DevShed 10 years ago.
I'm currently developing a "Book of Knowledge", something for people to look up jargon (yes, there's Wikipedia, but this is more of a pedantic exercise for me than anything).
I've developed what I'd call a responsive layout, except when you view it on a tablet (iPad), and especially when you rotate the tablet.
Here's what I've found - if you go to my dev site (http://dict.dev.numonium.com) on an iPad (start in landscape mode) and start tying a query, it does work.
After the results are displayed, rotate the iPad to portrait. You'll see that iOS Safari totally messes up the layout, introducing a white square, when nothing is white - my body background is black. Also, the background-image is fixed, but somehow you can scroll the background.
Now rotate the tablet/iPad back to where it was originally; you'll notice that the results aren't displaying the same as they had when you started, despite having performed a symmetrical operation on the device.
I know that the dictionary's results display in a container with a horizontal overflow, so that has to be taken into account when WebKit processes an "orientationchange" event.
Please let me know your thoughts - is this constrained to iOS Safari? I know that Chrome on iOS provides better results, but still has a discrepancy after the landscape/portrait/landscape rotation.
Thanks so much for all your help!
http://dict.dev.numonium.com - I have screenshots to illustrate the point, but they won't let me upload attachments here.
February 17th, 2014, 10:00 PM
A couple things you could try...
If you put min-widths on your main elements... body etc... it might help keep the shape when you rotate it.