Landscape orientation not working very well

Freddy03h / heart.css

CSS micro-framework for Single Page Application

35 stars 2 forks source link

Landscape orientation not working very well #2

Open DjebbZ opened 10 years ago

DjebbZ commented 10 years ago

Hi Freddy :)

I tested the iOS and Android examples and when rotating my device (iPhone 5c iOS 7.1.1) a weird behavior happens : I get an empty zone at the bottom of the screen. Screenshot :

Freddy03h commented 10 years ago

Ok I can reproduce. It appear on Safari but not as an installed webapp on homescreen. It's also not appear if the app is loaded when the device is already on landscape.

If you scroll on the empty zone you can see the viewport scroll. I don't know why Safari adding height on device rotation to landscape…

I don't think it can be fix with only CSS. Maybe a scrollTo can fixe this.

I'll try :

window.addEventListener("orientationchange", function(){
  window.scrollTo(0,0);
}, true);

DjebbZ commented 10 years ago

Mhh.. Ok. Was just reporting, but it's good to know nevertheless. Feel free to close the issue.

Freddy03h commented 10 years ago

http://stackoverflow.com/questions/22607561/is-there-a-bug-in-the-new-ios-7-1-minimal-ui-viewport-setting http://stackoverflow.com/questions/22391157/gray-area-visible-when-switching-from-portrait-to-landscape-using-ios-7-1-minima

I never noticed this iOS bug so thank's for the report ! My previous code work, I'll add it to the examples.