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可以解决问题。

<强> Working Fiddle

CSS：

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

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

Chrome：显示固定背景，因为它未修复

1 个答案: