rodneyrehm / viewport-units-buggyfill

Making viewport units (vh|vw|vmin|vmax) work properly in Mobile Safari.
MIT License
1.59k stars 151 forks source link

Doesn't work on iOS 10.3 #82

Open starrychloe opened 7 years ago

starrychloe commented 7 years ago

This just doesn't work. It works on the desktop (or maybe it's just vh working normally), but the div is not resized on mobile Safari. I tried to wrap it in document.ready(), I tried force: true, nothing works.

$(document).ready( function() {
    console.log(window.innerHeight);
    console.log($('.jumbotron').css('height'));
    window.viewportUnitsBuggyfill.init({force: true});
    console.log(window.innerHeight);
    console.log($('.jumbotron').css('height'));
});

From the desktop:

550
550px
550
550px

Here is the CSS

  .jumbotron {
    height: 100vh;
    position: relative;
    background-color: initial;

I actually found a way to turn off Javascript in Safari, and the div was larger without it on! Still not 100% height, but this plugin is making it smaller.

v0.6.1

rodneyrehm commented 7 years ago

but the div is not resized on mobile Safari.

what exactly do you mean by this?

can you reproduce your problem in a https://jsbin.com or https://jsfiddle.net?