CSS lags when screen orientation changes
I’ve added custom CSS to handle some image resizes when a phone or tablet are in portrait mode. However, when I rotate the screens back and forth from portrait to landscape (and back again) the CSS code doesn’t refresh or “lags” behind the orientation change until the page is scrolled a little bit. Once the page is scrolled, it realizes there has been a change and then the correct CSS code is executed.
Any idea how to make the refresh faster without scrolling?
Well, when the page doesn’t load, it’s simply a white screen. So I’m not sure if a screenshot is really required for a blank white screen. The homepage loads more regularly than the others, but these two regularly fail on my tablet:
As for the “lagging” CSS when the screen orientation, it’s as it sounds. The screen displays like it should when the page is loaded. Then, when the orientation changes, so should the content on the page to adjust for the different orientation. However, it doesn’t change right away, and I need to scroll down the page a bit until the “new” CSS code is recognized.
When the page is initially loaded in Portrait mode, it looks just fine:
But when it’s rotated into Landscape mode, the CSS doesn’t update right away. You can see how there are 1.5 pictures displayed in the image slider:
However, when I scroll the page just a little bit, the CSS is “refreshed” or recognized by the phone, and then the images readjust how they’re supposed to:
And for some reason, your forum won’t let me edit my post when I click on “edit.” So here are the links to the images above in the same ordered they’re listed:
Loaded correctly in portrait:
Landscape loaded incorrectly when screen orientation changes:
And Landscape that loads correctly after scrolling the page a little bit:
You must be logged in to reply to this ticket.