Safari视口错误，位置固定和底部或顶部出现问题 [英] Safari Viewport Bug, Issues with Fixed Position and Bottom or Top

问题描述

我在iOS 12.3.1 Safari中遇到了一些奇怪的事情. 此问题至少可以追溯到iOS 12.2，，但我想它比这个问题存在的时间要长得多.

I'm experiencing something strange in iOS 12.3.1 Safari. This issue dates back to at least iOS 12.2, but I imagine it's been a problem for much longer than that.

当尝试将元素与视口的底部轴对齐时，该问题就会显现出来，并且在纵向和横向模式下都是问题.

The issue manifests itself when trying to align an element to the bottom axis of the viewport, and is a problem in both portrait and landscape mode.

为了重现该问题，元素必须具有position的fixed或absolute，但是将元素定位为top和transform还是bottom都没有关系.

In order to reproduce the problem, the element must have a position of fixed or absolute, yet it doesn't matter whether you position the element with top and transform or bottom.

该问题仅在纵向模式下显示，如果Safari正在显示其压缩的URL栏，它将替换常规的URL和菜单栏，并且没有垂直溢出.

The issue only manifests itself in portrait mode if Safari is displaying its condensed URL bar, which replaces the normal URL and menu bars, and there is no vertical overflow.

普通URL和菜单栏//压缩URL栏

Normal URL and Menu Bars // Condensed URL Bar

值得注意的是，只有在出现垂直溢出并且浏览器向下滚动或浏览器的方向从纵向更改为横向然后再次返回时，才会显示浓缩菜单栏(尽管是否存在垂直溢出) ).

Notably, the condensed menu bar is only ever displayed when there is either vertical overflow and the browser is scrolled downwards or when the browser's orientation has been changed from portrait to landscape and then back again (despite whether or not there is vertical overflow).

具有垂直溢出的更改方向//没有溢出

Changing Orientation with Vertical Overflow // Without Overflow

我不确定这里到底发生了什么.

I'm not sure exactly what's happening here.

横向模式的问题始终且仅在页面顶部显示常规导航栏时才会发生.由于向下滚动或方向从纵向更改为横向，因此导航栏仅在横向模式下处于隐藏状态.

The issue with landscape mode always and only occurs when the normal navigation bar is displayed at the top of the page. The navigation bar is only ever hidden in landscape mode due to downward scrolling or orientation change from portrait to landscape.

具有垂直溢出

With Vertical Overflow

没有垂直溢出

Without Vertical Overflow

有趣的是，横向模式下导航栏的高度明显偏移了视口，因此在显示导航栏时，将bottom: 0或top: 100%的位置推到了视口之外.

What's interesting is that the height of the navigation bar in landscape mode clearly offsets the viewport so that position of bottom: 0 or top: 100% is pushed outside of the viewport when the navigation bar is being displayed.

这是一个超级hack式的解决方法，也是一个糟糕的解决方法，但这是迄今为止唯一导致position: fixed; bottom: 0;在没有方向转换后将元素实际切换到视口底部的事情.

It's a super hack-ish workaround, and a crappy workaround at that, but it's the only thing so far that causes position: fixed; bottom: 0; to actually position an element at the bottom of the viewport after switching orientations if there is no overflow.

<div style='height: 0'>
  <!-- the quantity of <br> elements must create vertical overflow -->
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <!-- this does not work without the space character -->
  &nbsp;
</div>

但是，我只是注意到它会造成不可见的垂直溢出，从而至少在Safari和Chrome中造成不必要的垂直滚动.我还担心这可能会导致无法测试的其他浏览器中的其他设备出现其他问题.

However, I just noticed that it creates an invisible vertical overflow and thus unnecessary vertical scrolling in at least Safari and Chrome. I'm also worried that it might cause other issues on other devices in other browser that I'm unable to test.

由于此错误，为了用户体验，网站有时有时看起来像废话，真是令人沮丧.

It absolutely sucks that a website has to sometimes look like crap for the sake of user-experience due to this bug.

推荐答案

您好，这个问题起初使我着迷，我回想起我几天前在HTML和CSS上花了好几个小时才试图弄清事情的方法. miss，所有的苦难时刻都在这一刻.

Hello this question kind of got me at first and I thought back to my days poking around in HTML and CSS for hours on end trying to get things right. Alas all those hours of missery have been for this moment.

vh过去是由浏览器的当前视口来计算的.如果您在浏览器中加载了网站，则1vh等于屏幕高度的1％，然后减去浏览器界面.

vh used to be calculated by the current viewport of your browser. If you loaded a site in your browser, 1vh would be the same as 1% of your screen height, and then minus the browser interface.

但是！如果要滚动，它将变得很棘手.刷过浏览器界面(在本例中为地址栏)后，您的内容就会出现明显的跳跃，因为vh将会被更新.

But! If you wanted to scroll, it gets tricky. Once you brush past the browser interface (in this case your address bar), you would have a wierd jump in your content because the vh would be updated.

用于iOS的Safari实际上是第一个实施此修复程序的公司.他们根据最大屏幕高度设置固定的vh值.这样用户就不会体验内容的跳跃，但是....是的，总会有一个...

Safari for iOS was actually was one of the first to implement a fix. They set a fixed vh value based on the max screen height. Then the user wouldn't experience the jump in content, but .... yup, there's always a but...

具有固定值真棒，除非您想拥有完整尺寸的元素，或者在屏幕底部具有固定位置的元素，因为那样的话，它将被裁剪掉！

Having the fixed value is awesome, except when you wanna have a full sized element, or an element with fixed position at the bottom of the screen because then it would get cropped out!

那是你的问题....再见吧，因为...

That is your problem....and say goodbye to it, because...

这是您的解决方案！

css:

.my-element {
  height: 100vh; /* This is for browsers that don't support custom properties */
  height: calc(var(--vh, 1vh) * 100);
}

js:

// Get the viewport height and multiply it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then set the custom --vh value to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

现在，您可以像使用其他任何vh单位一样，将--vh用作身高值，将其乘以100，就可以得到我们想要的全高.

Now you can use --vh as your height value like we would any other vh unit, multiply it by 100 and you have the full height we want.

还有一件事，上面的js可以运行，但是当视口改变时，我们从不更新元素的大小，因此这还行不通，您需要一个侦听器...

One thing left, the js up there runs, but we never update the element's size when the viewport changes, so that wouldn't work yet, you need a listener...

更多js:

// We listen to the resize event
window.addEventListener('resize', () => {
  // Update the element's size
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

干杯！

这篇关于Safari视口错误，位置固定和底部或顶部出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！