bottom:0 having issues in iphone

Question

Hey guys i have the following social media , icons on my site:

<ul class="nav-social-media">
      <li><a href="#"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#"><i class="fa fa-instagram"></i></a></li>    
 </ul>

I have the following CSS applied:

.nav-social-media {
    /*padding-left: 2em;*/
    text-align: center;
    display: block;
    margin-bottom: 1em;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
} 

.nav-social-media  > li {
    display: inline-block;
    margin-right: 0.62em; 
}

.nav-social-media  > li > a {
    color: #000;
    font-size: 1.2em;
    display: inline-block;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
    text-decoration: none;
}

as you can see the bottom:0 , so this is how the social media icons look on mobile:

but in iphone6 this causes the following problem:

See how the iphone bottom bar covers the social icons, how can this be overcome ? is there a native iphone hack that can be used , instead of a hack that will effect devices of similar resolutions ?

P.S. for now i have increased the value of bottom to overcome this.

Answer 1

It's a known issue by design with Safari

This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)

The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).

It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.

Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.

From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

Reference blogs with perhaps some workarounds

• https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
• https://www.eventbrite.com/engineering/mobile-safari-why/