移动浏览器中的 CSS 背景标题不稳定

Question

谁能看看这个页面，看看你是否知道如何解决这个问题。

Original page link

此页面适用于桌面版 Chrome 和 Firefox 浏览器。它甚至可以在开发者预览版中响应移动 480 像素。

但是，如果您在手机或平板电脑上查看此页面，标题背景和模糊效果会很不稳定。不对齐并且不会像在桌面上那样在图像上滚动。

我的猜测是某些 CSS 在移动 chrome 上不受支持。是这样吗？

请帮忙解决这个问题。 谢谢

这是 JS Fiddle

.title_EService {
  background: url(http://advantageaccountants.com.au/image/e_service_header.jpg) fixed center 3.67em no-repeat;
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.title_EService > header {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 20px 30px;
  background: inherit;
  background-attachment: fixed;
  overflow: hidden;
}

.title_EService > header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: inherit;
  background-attachment: fixed;
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

.title_EService > header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25)
}

.title_EService > header > h1 {
  font-weight: bold;
  margin: 0;
  color: white;
  position: relative;
  z-index: 1;
}

Answer 1

我不是专业人士，但当我查看您的 css 时，我想也许固定高度可能是您在类 (.navbar) 本身的边距问题，我没有看到任何针对移动设备调整它的特定代码。

 .navbar {
   position: relative;
   min-height: 50px; */
   margin-bottom: 20px; */
   border: 1px solid transparent;
}