Question

我在最新版本的Chrome（版本60.0.3112.78）中遇到了一个问题，即将绝对定位的父元素的子元素定位为固定（以及其他一些CSS属性）。

这是一个用于演示行为的CodePen：https://codepen.io/anon/pen/GvJeGL

    <div class="outer">
       <div class="inner"></div>
    </div>

.outer {
    position: absolute;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    z-index: 1; /* auto fixes rendering */
    border-radius: 5px; /* 0 fixes rendering, other values give strange results */
    overflow: hidden; /* visible fixes rendering */
    width: 100px;
    height: 100px;
}

.inner {
    position: fixed;
    width: 80%;
    height: 75%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: salmon;
}

当我将Chrome更新为主要版本60（它在59中工作）时，会出现此问题。 Safari似乎也有问题。

如果您使用“.outer”元素的Codepen中的CSS值，您会注意到渲染行为会发生变化。有趣的是，边界半径有影响。

这是一个错误还是任何人都可以解释这种行为？

Chrome v60渲染错误？

0 个答案: