Chrome：显示固定的背景，因为没有固定

Question

我不明白为什么我的固定背景开始变得有些固定。

这是非常特殊的情况，我知道如何解决。

您可以删除：

.row2 position:relative

要么

row1 div -webkit-backface-visibility: hidden;

但是我不明白为什么会发生此问题， position:relative或-webkit-backface-visibility:hidden影响此行为。

我认为这个问题可以引起人们的兴趣。

这是示例： JSfiddle

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
    <title>Theme Framework</title>
    <style>
        .row1 {
            height:45px;
        }
        .row1 div {
            height:47px;
            -webkit-backface-visibility: hidden;
        }
        .row2 {
            position: relative;
            height:500px;
            background-image:url(http://www.hdwallpapers.in/download/uphill_road-1024x768.jpg);
            background-position: 50% 23px;
            background-attachment: fixed;
            background-size:cover;
        }
    </style>
</head>
<body>

    <div class="row1">
        <div>
        </div>
    </div>
    <div class="row2"></div>

</body>
</html>

Answer 1

在这种情况下， backface-visibility似乎干扰了background-attachment 。 这里的关键是具有backface-visibility的元素比其包含的元素高。 这意味着它在row1下面延伸。 添加overflow:hidden到row1修复该问题。

工作小提琴

CSS：

  .row1 {
    height:45px;
    overflow: hidden;
  }

据这里实际发生的情况。 我的猜测（仍在寻找完整的答案）是因为具有backface-visibility的元素重叠并覆盖了背景固定样式。 渲染引擎可能出错。

Chrome：显示固定的背景，因为没有固定

问题描述

1 个解决方案

解决方案1
1 2014-02-02 16:30:24

Chrome：显示固定的背景，因为没有固定

问题描述

1 个解决方案

解决方案1 1 2014-02-02 16:30:24

解决方案1
1 2014-02-02 16:30:24