在Safari导航栏在iOS崩溃时保持元素固定 [英] Keep element fixed while Safari navigation bar collapes on iOS

问题描述

我正在基于Jekyll的 Hyde主题开发一个网站.

I'm developing a web site based on the Hyde theme for Jekyll.

此布局使用左侧的固定导航栏，宽度为100％.在大多数情况下，这都可以正常工作.

This layout uses a fixed navigation bar on the left with 100% width. This is working fine in most situations.

但是，在iOS上的Safari中，当用户滚动浏览器的顶部导航栏时，视口的高度会发生变化.如果发生这种情况，导航栏的大小将在滚动停止之前不会更新，从而在左下角留下一个导航栏未覆盖的区域:

In Safari on iOS, however, the height of the viewport changes while the user is scrolling as the browsers top navigation bar collapses. If this happens, the navigation bar's size is not updated until the scroll stops, leaving an area in the lower left corner that is not covered by the navigation bar:

(请注意，文本在导航栏下方扩展.此屏幕快照是在页面运动时拍摄的.)

(Notice the text extends below the navigation bar. This screenshot was taken while the page was in motion.)

此视频显示了实际存在的问题.

This video shows the problem in action.

在滚动过程中，有没有办法强迫Safari更新导航栏的高度?

Is there any way to force Safari to update the navigation bar's height while the scroll is in progress?

推荐答案

进行了持​​续的讨论.这个问题没有真正的解决方案. https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile- browsers.html

its an ongoing discussion. There is no real solution for this problem. https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

您可以为网站尝试的操作如下:

What you can try for your website is the following:

.sidebar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 18rem;
    text-align: left;
    height: 100vh;
}

这将使侧栏与底部对齐，并且文本不会被剪切.白色的条形图将显示在顶部，但是当底部被切掉时，它不会太令人讨厌.

This will align the sidebar to the bottom and the text wont cut. The white bar will appear on top but it wont be too intrusive as the bottom being cut out.

这篇关于在Safari导航栏在iOS崩溃时保持元素固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！