Question

我在chrome 44中遇到此代码的问题（这里是小提琴：http://jsfiddle.net/o6b8rdh8/）：

<div id="body">

    <div id="header">
        Header...
    </div>

    <div id="content">
        <div id="main">
            <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
        </div>
        <div id="parent">
            <div id="background">

            </div>
            <div id="card">
                Lorem...
            </div>
        </div>
    </div>

</div>

#body {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    overflow: hidden;
}

#header {
    position: fixed;
    height: 50px;
    background-color: yellow;
    opacity: 0.5;
    width: 100%;
}

#content {
    position: absolute;  
    top: 50px;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: auto;
}

#parent {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: auto;
}

#background {
    opacity: 0.5;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: blue;
}

#card {
    position: relative;
    margin: 50px 50px 0;
    background-color: white;
    height: 2000px;
    border: 5px solid red;
}

以上是该问题的屏幕截图。

问题是当我滚动时，固定背景也会滚动。它应该保持固定。

在Firefox 39和Safari 8中完美运行。

知道我们如何解决这个问题吗？

感谢。

修改1 ：移动设备上的问题相同。使用Chrome最新版本在OnePlus One和Nexus 9上复制。

编辑2 ：我更新了小提琴，以反映更多的现实。这打破了@vivekkupadhyay的答案:(。

这是另一个显示模态视图关闭时的用例的小提琴：http://jsfiddle.net/et0d4dox/1/

初始小提琴（http://jsfiddle.net/o6b8rdh8/）是打开模态时的用例。

Answer 1

奥莱特！我找到了答案！

我们需要添加.directive('gcdmAutomaticLogoutOnClose', function($rootScope, $window, MyLoginService){ return { restrict: 'A', scope: true, controller: function($element){ $window.onbeforeunload = function (){ return MyLoginService.logout().then(function(){ console.log("Logout complete"); return null; }); }} } });的{{1}}：CSS

现在

#background css：

-webkit-transform: translateZ(0);

更新的小提琴是：http://jsfiddle.net/o6b8rdh8/1/

我不确定为什么需要添加此属性。如果有人有答案，我会很高兴知道。

Answer 2

如果我的条件合适，请尝试更改CSS #content，如：

#content {
    position: absolute;  
    height: calc(100%);
    top: 50px;
    bottom: 0;
    right: 0;
    left: 0;
}

它肯定会为你做到这一点。

Answer 3

我已经在我自己的问题中提到了你的问题：

https://stackoverflow.com/questions/32476932/chrome-v45-rendering-absolute-div-background-color-with-scroll

它似乎非常相关，而webkit-transform的答案也解决了我们的问题。

只是我们也不确定原因。

我在Chrome中也引用了这个问题，这可能是相关的： https://code.google.com/p/chromium/issues/detail?id=473020

谢谢：）

Bug chrome：父固定滚动，第一个固定子（背景颜色）也滚动

3 个答案: