#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2005
    Posts
    22
    Rep Power
    0

    iOS WebKit Orientation Change Breaks Layout


    Hello all,

    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.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    68
    Rep Power
    0
    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.

    Another thing you can try is changing the view port when the rotate it... I've only done this with JavaScript though, so I don't know if that's ok for you...
    http://kawaii-nation.com (^._.^)ノ

IMN logo majestic logo threadwatch logo seochat tools logo