Flex-box 100vh延伸到移动Safari浏览器后面 - 是否有任何已知的技巧或解决方案 [英] Flex-box 100vh stretches behind mobile safari chrome - are there any known tricks or solutions

问题描述

Flex-box 100vh延伸到移动Safari浏览器之后 - 是否有任何已知的技巧或解决方案？ - 或者是真的太好了？

我经常想要一个模式类型的覆盖div，或者一个简单的按钮UI屏幕的全屏图像。我使用弹性盒越多，我可以依靠我的一些旧技术。在100％高度时，我通常会达到的破解是：

  html，body {
 height ：100％; 
} 
  

HTML和body没有明确的高度，真的知道他们是多高。为了告诉任何孩子高，他们需要知道父母的身高。这可以得到相当深的嵌套元素杂乱。
$ b $ p $ 100vh 视图端口高度需要此嵌套问题方程式，但在移动浏览器上，这似乎是有区别的。在iOS Safari中， vh 会将它的区域包含在它们放置在底部的好玩的UI栏之下。居中的元素不会出现居中，因为感知到的偏移量，当您尝试滚动的东西时，会让所有的东西变得笨拙，感觉破碎。

我可以使用modernizr来检查触摸，但这是一个不受欢迎的位置。在某些情况下，我可以添加一个类的HTML和身体100％，包括视图嵌套视图，但是当像flickity注入许多子元素，或MVC中嵌套视图产生更多的嵌套元素，这是真的不合逻辑的告诉一切都是100％的高度和触摸是不是一个一致的措施，因为有触摸桌面等。

  .element-with-background-image {
 width：100％; 
身高：100vh; 
 background-image：url（...）; 
 background-size：cover; 
 background-position：center center; 
} 
  

这感觉就像我们应得的东西。他们拿走了我们最大的视口meta标签。我只是想做一些不感到破裂的东西。

死简单的例子： http://s.codepen.io/sheriffderek/pen/LWevrx
调试版本（在手机上测试）： http://s.codepen.io/sheriffderek/debug/LWevrx

更复杂的滑块示例： http://codepen.io/sheriffderek/pen/BWJEKJ
调试版本（在手机上测试）： http：// s。 codepen.io/sheriffderek/debug/BWJEKJ

制作 position：fixed; 似乎是只有这样才能得到全面的覆盖而没有小故障（这通常会导致重大故障，直到最近）

固定位置版本： http://codepen.io/sheriffderek/pen/XMVQOX
调试版本（在手机上测试）： http://s.codepen.io/sheriffderek/debug/XMVQOX

固定位置w滑块/需要获得窗口高度并将其添加到所有childred - 最佳解决方案我已经能够想出：
http://codepen.io/sheriffderek/pen/RpxOzM
调试版本（在手机上测试）： http://s.codepen.io/sheriffderek/debug/RpxOzM

摘要

是不是我们可以在这种情况下使用100vh？我应该把它从我的工具箱中取出吗？或者 - 你是否有一套规则或技术可以让我把它留在我的生活中？

解决方案

据此Chrome版本从版本56开始具有相同的行为。
https://developers.google.com/web/updates/2016/12/url-bar-resizing

改进与iOS上的Safari的互操作性。新模式应该与Safari的行为相匹配，使网页开发人员的生活更轻松。使vh单位成为最大可能的视口，但ICB尽可能最小的不直观的选择是匹配Safari的行为。

所以100vh不会帮助你（我）在这种情况下。

Flex-box 100vh stretches behind mobile safari chrome - are there any known tricks or solutions? - OR is it just too good to be true?

I often want to have a 'modal' type cover div, or a full-screen image for simple one button UI screens. The more I use flex-box, the less I can count on some of my old techniques. The hack I normally reach for when it comes to 100% height, is to:

html, body {
  height: 100%;
}

HTML and body don't have an explicit height... and can't really know what height they are. In order to tell any children how 'tall' to be, they need to know their parent's height. This can get pretty messy with deeply nested elements.

100vh view-port height takes this nesting issue out of the equation, but on mobile browsers there seems to be a difference in opinion as to how this should play out. In iOS Safari the vh would include its area beneath its meddlesome UI bar they place at the bottom. Centered elements do not appear centered because of the perceived offset and when you attempt to scroll things get all screwed up and clunky and feel broken.

I can use modernizr to check for touch, but this is a undesirable position to be in. In some cases I can add a class for html and body 100% including the view nested views, but when something like flickity injects many child elements, or there are nested views in an MVC that generate more nested elements, it's really unruly to tell everything to be 100% height / and touch isn't a consistent measure because there are touch desktops etc.

.element-with-background-image {
  width: 100%;
  height: 100vh;
  background-image: url(...);
  background-size: cover;
  background-position: center center;
}

This feels like something we deserve. They took away our max on the viewport meta-tag. I just want to make something that doesn't feel broken.

Dead simple example: http://s.codepen.io/sheriffderek/pen/LWevrx Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/LWevrx

More complex example with slider: http://codepen.io/sheriffderek/pen/BWJEKJ Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/BWJEKJ

Making things position: fixed; seems to be the only way to get full coverage without glitch (which usually caused major glitches until recently)

Fixed position version: http://codepen.io/sheriffderek/pen/XMVQOX Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/XMVQOX

Fixed position w slider / needed to get window height and add it to all childred - best solution I've been able to come up with: http://codepen.io/sheriffderek/pen/RpxOzM Debug version (to test on phone): http://s.codepen.io/sheriffderek/debug/RpxOzM

summary

Is 100vh just not something that we can use in situations like this? Should I take it out of my toolbox? OR - do you have a set of rules or techniques that will allow me to keep it in my life?

解决方案

According to this Post Chrome has the same behaviour since Version 56. https://developers.google.com/web/updates/2016/12/url-bar-resizing

Improved interoperability with Safari on iOS. The new model should match how Safari behaves, making life easier for web developers. The unintuitive choice of making vh units the largest possible viewport but the ICB the smallest possible is to match Safari's behavior.

So 100vh will not help you (me) in this Situation.

这篇关于Flex-box 100vh延伸到移动Safari浏览器后面 - 是否有任何已知的技巧或解决方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！