How to overcome height:vh bug in iOS


i have a single page site that has multiple “sections” each set to a height of vh. Which works for every device/platform except iOS. Even under iOS it works if I don’t do any dynamic DOM manipulation ( in my case I have a slider that changes the DOM )

When the slider is running, the VH gets corrupted under iphone and ipad. It seems to get “bigger” each time the dom is dynamically changed.

Right now as a work around I am specially checking in JS for iphone/ipad and changing the height to a fixed amount. this is a real hack in my mind.

I haven’t been able to find anything useful on stackoverflow on this.

Is there a work around?



I think we’d need to see the site so we can see what is going on and try some things out but it looks as though you know what you are doing.:slight_smile:

I’m wondering whether if it is a problem with the vh unit specifically and whether you could do the same without using the vh unit. Most of the uses I see for the vh unit can be done with normal css as long as the right structure is followed as 100% height can be obtained quite easily when all you want is a page full at a time. Of course your page sounds a lot more complicated than that :slight_smile:

thanks Paul,

the demo you link to is cool. maybe you are right. dont use vh and go with the 100% height solution.