在移动设备上隐藏搜索栏会导致背景图像无法完全拉伸并在底部创建白色条纹

Question

我知道这个问题很常见，很多用户在那里寻求解决方案，当然，我确实阅读了这些问题的答案，但对我没有任何帮助。

这是网站首次呈现时的样子。一切正常，图像覆盖了整个页面。

然后我尝试向下滚动，大约有 50% 的可能性会发生这种情况。

隐藏了滚动条，但底部出现难看的白色条纹。当我停止滚动时，图像会自行拉伸到正确的位置。但是因为那条白色条纹，滚动体验被破坏了。

有人帮忙吗？

<div className="flex" style={{height: height, minHeight: "576px" }}>
  ....
</div>

html { 
background: url(./bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

Answer 1

更新建议：

请检查第二次尝试： https://codepen.io/panchroma/pen/NWXVvbL

（或最终将过期的预览 link： https://cdpn.io/pen/debug/NWXVvbL?authentication_hash=wQMPobNYVpdk )

变化是背景图片的添加方式：

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(./bg.jpg)
    no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

第二个建议归功于文森特 background: fixed no repeat not working on mobile

请注意，由于移动设备处理固定背景图像的方式，我下面的原始解决方案不是一个好的解决方案。

===========

你觉得这怎么样？
https://codepen.io/panchroma/pen/RwxmVPY

它强制 HTML 元素为 100vh。为了说明，我删除了您的 .flex 上的样式 class，不需要解决您的图像背景问题。

而且我还在页面的头部添加了视口元标记

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML

<div class="flex">
  ...
</div>

CSS

 html {
  background: url(./bg.jpg) no-repeat center center fixed;
    no-repeat center center fixed;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
height: 100vh; /* NEW */
}

/* .flex styling removed */
/* .flex{
  height: height, minHeight: "576px";
 
} */

在移动设备上隐藏搜索栏会导致背景图像无法完全拉伸并在底部创建白色条纹

Hiding search bar on mobile device cause background image not to fully stretch and creating white stripe at the bottom

html

css

android-layout

responsive-design

tailwind-css