html - 底部 :0 having issues in iphone

Question

大家好，我的网站上有以下社交媒体和图标:

<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>

我应用了以下 CSS:

.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;
}

如您所见，bottom:0，社交媒体图标在移动设备上的外观如下:

但是在iphone6中这会导致以下问题:

看看 iphone 底栏如何覆盖社交图标，如何克服这个问题？是否有可以使用的 native iphone hack，而不是会影响类似分辨率设备的 hack？

附言现在我增加了 bottom 的值来克服这个问题。

Answer 1

这是一个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.

可能包含一些解决方法的引用博客

• 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/