Can seem to get this to work with vh

[Jakobud]

I have a css file that is full of various vh values for padding on elements, margins, etc...

When I load up both scripts and then do

viewportUnitsBuggyfill.init({hacks: window.viewportUnitsBuggyfillHacks});

Nothing gets fixed. I see some elements sort of shift for a sec, but things do not end up as I would expect them. For example I have a dev that is set to height: 90vh. 90% of the viewport height. When the page loads on iPad and the above script command runs, the div is definitely not 90% of the page height. It's like 1000% of the page height. It's so big I can't even tell.

I am testing on an iPad and am using remote safari webkit inspector debugging and I don't get any errors or anything like that (except for some AJAX CORS errors for some things that don't matter on the page).

What am I doing wrong? Any tips? The docs make it sound like it should just work but it just isn't...

[rodneyrehm]

a) what's the iOS / Safari version?
b) is that page live so we can have a look?

[Jakobud]

Page isn't live yet. I'll get back to you soon.

[tomsseisums]

Experiencing the same problem with iPhone 4S, iOS 7.1.2, Safari 7 (per detectmybrowser.com).

A somewhat live example can be seen here: http://toms.somese.lv/project-manager-vacancy-2014/n/ (sorry, no English).

Weirdly, though, the problem does not seem to happen on Portrait mode, only in Landscape. Even more weird, if I refresh the page in Portrait and then rotate into Landscape - no bugs. Only when loaded/refreshed in Landscape mode, you can notice a world full of problems.

Though, it's not all perfect in Portrait mode either. If you are to step into the "dashed" path, take a few steps back and forth there and change devices orientation inbetween, some jumps start to happen.

A quick fix is to clear the cache before loading the page in Landscape. That seems to fix the issu until next refresh. As a matter of fact, just found out this link: http://krzychukula.blogspot.com/2014/04/safari-mobile-css-vw-bug.html, the guy mentions problems about caching.

In about 20 minutes, I'll report about behavior on iPad too.

I've set up a hybrid - utilizing % for static positioning ang viewport units for translations. Seems to be working OK for now (none of the bugs appear on iOS, at least, didn't notice yet). http://toms.somese.lv/project-manager-vacancy-2014/n/hybrid

Update

iPad (2; iOS 7.1.1; Safari 7) seems to be not having the problem with Landscape mode (though, may simply be unnoticeable), but the orientation change quirks remain.

[Jakobud]

Just a quick question. How come this doens't work well with externally accessed stylesheets or inline styles etc? Why don't you just manipulate the DOM stylesheet rules directly?

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information

Those rules in the DOM are there and ready to manipulate no matter if they were loaded inline, from an external source, local source, dynamically injected, etc...

[rodneyrehm]

can you guys please post the UA strings your Safaris use?

[garyrozanc]

Any updates? This isn't working for me either with vh units?

[rodneyrehm]

Haven't looked into the problem yet. Since it's open source, everyone can take a stab at figuring out what's going on. I'm currently dealing with a semi-dead MacBook pro and probably won't look at this for at least another week - sorry.

[matthewvalimaki]

Happens on Verizon iPhone 5 running 7.1.2. Here's the UA:
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D257 Safari/9537.53

[iSimonWeb]

Still nothing here? Having almost the same issue on iPhone5S with iOS7.
The plugin works actually, but it breaks somewhere and doesn't let the rest of the script to run.
Here's where I'm trying to get this to work -> http://test.stsanfrancisco.com

[rodneyrehm]

Just a quick question. How come this doens't work well with externally accessed stylesheets or inline styles etc? Why don't you just manipulate the DOM stylesheet rules directly?

"externally accessed" probably means loaded off a different domain. In this case the "Same Origin Policy" requires your server to send CORS (Cross Origin Resource Sharing) headers for the resource. Since this has not worked well in the browsers I tested, the buggyfill downloads the CSS via XHR and goes from there.

Still nothing here? Having almost the same issue on iPhone5S with iOS7.

Unless someone else is tackling this issue, no, still nothing. I don't have any iOS7 devices anymore, I can't reproduce the issue…