How to fix vh(viewport unit) css in mobile Safari?

Question

I've used vh (viewport units) css in one of my projects but in mobile safari it doesn't work. It seems like Safari doesn't know what to do with vh, but it works fine in other browsers. I would like to make the same effect with or without vh please help me. By the way I'm using facebox. (height:50% doesnt work fine)

html:

 <div id="facebox" style="top: 0px; left: 0px; display: block;"> 
       <div class="popup">    
             <div class="body"> 
                  <div class="content_light">
            <div class="Lcontent_left"></div>
                    <div class="Lcontent_right">
                    <div class="Lright_content"></div>
                    </div>
                  </div>
              </div>
       </div>
    </div>

This is my css:

#facebox .popup {
    display:block;
    position:relative;
margin:auto;
margin-top:0%;
  min-height:100vh;
  height:1px;
  border-radius:5px;
}

    #facebox .body {
  padding:0px;
  display:block;
  position:relative;
  background: #fff;
  width:100%;
  min-height:100vh;
  height:1px;
  margin:auto;
   border-radius:5px;
}
.Lcontent_left{
    position:relative;
    float:left;
    width:100%;
    height:50vh;
    /*min-height:250px;*/
    text-align:center;
    overflow:hidden;
    }
.Lcontent_left_fullscreen{
    display:none;
    }
.Lcontent_right{
    float:left;
    text-justify:inter-word;
    position:relative;
    width:100%;
    height:50vh;
    background-color:white;
    overflow:auto;
    font-family:"Open Sans",Helvetica,sans-serif;
    }
.Lright_content{
    position:relative;
    width:95%;
    margin:auto;
    margin-left:5px;
    overflow:auto;
    height:50vh;
    word-wrap:break-word;
    line-height: 1.5;
    font-size:16px;
    overflow:auto;
}

Answer 1

I came across this fix today: https://github.com/rodneyrehm/viewport-units-buggyfill It checks every element for a vh/vw unit and turns it into px. Well worth checking out I think.

Answer 2

You can use jQuery in order to fix that.

$('container').height($(window).height()/2);

This works on every browser. Hope it helps.

Answer 3

I also had this issue, here is my solution.

This is equals to height:100vh;

document.getElementById("your-element").style.height = window.innerHeight + 'px';

You can also use below code with jQuery,

$('your-element').height(window.innerHeight + 'px');

Checked with safari :)

Answer 4

I used this CSS only hax today and it worked. iOS 8.2 iPhone Safari :

html, body {
    ...
    width: -webkit-calc(100% - 0px);
    ...
}

Thought: Using calc seems to get Safari to convert units to px itself. Now my page is correctly full-bleed on Chrome and Safari on iOS.

Answer 5

If you need a fullscreen div on mobile browsers, try using wrapper with fixed position and height set to 100%. Then set 100% height to your popup. You can adjust the position of the wrapper and popup in a way you like with top, left, right, bottom properties, as well as height and width.

These eliminates the problem with mobile browsers address bar autohiding in my case where I had to create a fullscreen popup on mobile chrome.

Answer 6

I found this library very useful: https://github.com/Hiswe/vh-check

It will calculate the offset value for the correct vh, and put it in a css variable so you can use it in the css:

.main {
  height: calc(100vh - var(--vh-offset, 0px));
}

Answer 7

My version is "querySelector" because: if I use class of element "getelementbyid" not worked. And this way js is most universal if jQuery libraries are not connected. document.querySelector("your-element").style.height = window.innerHeight + 'px';