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

Question

When setting a background gradient to background-attachment: fixed it is suddenly cropped to 50% of the page width. It seems related to the position left: 50%. I wonder if this is a bug or if I'm using the CSS wrong here:

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

I know that I can bypass the issue by removing the styles left: 50%; and transform: ... but that's not a practical solution in my case. The container has an unknown left margin and the pattern needs to reach from edge to edge.

Does that mean my CSS is wrong? What CSS would display the fixed background pattern in full width?

Update

I notice that there is a different behavior across browsers:

Answer 1

The bug seems to be related to transform. Use margin instead

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