错误或意图 - 修复CSS渐变被裁剪为50%的问题。

Question

当把背景渐变设置为 background-attachment: fixed 突然被裁剪成页面宽度的50%。这似乎与以下位置有关 left: 50%. 我不知道这是一个bug，还是我在这里使用了错误的CSS。

.container {
  position: relative;
  height: 80px;
  margin: 10px 0
}
.container:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    background: #f0f0f0;
    background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);

    left: 50%;
    transform: translate(-50%);
}

.container.fixed-bg:before {
    background-attachment: fixed; /* <-- This line causes the problem. Why? */
}

<div class="container">...</div>
<div class="container fixed-bg">...</div>

我知道我可以绕过这个问题，通过删除样式。left: 50%; 和 transform: ... 但在我的情况下，这不是一个实际的解决方案。容器有一个未知的左边距，而图案需要从边缘到边缘。

这是否意味着我的CSS是错误的？什么样的CSS可以全宽显示固定的背景图案？

更新

我注意到，在不同的浏览器上有不同的行为。

Answer 1

这个bug好像和变换有关。用margin代替

.container {
  position: relative;
  height: 80px;
  margin: 10px 0
}
.container:before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    background: #f0f0f0;
    background-image: repeating-linear-gradient(315deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,rgba(0,0,0,.06) 0,rgba(0,0,0,.06) 20px);

    left: 50%;
    margin-left:-50vw;
}

.container.fixed-bg:before{
    background-attachment: fixed; 
}

<div class="container">...</div>
<div class="container fixed-bg">...</div>