错误或意图 - 修复了 CSS 渐变被裁剪为 50%

Question

将背景渐变设置为 background-attachment: fixed 时，它突然被裁剪为页面宽度的 50%。好像跟位置left: 50%有关。我想知道这是一个错误还是我在这里使用 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

该错误似乎与转换有关。改为使用边距

.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>

错误或意图 - 修复了 CSS 渐变被裁剪为 50%

Bug or Intention - fixed CSS gradient is cropped to 50%

css

google-chrome

background-image

linear-gradients