'macOS Safari: fixed background attachment misplaced with parent translateX and left

I have a div, that has full width (100vw) and used a translate in order to place it centered. This is because it’s parent has no full width. If I now add a child with a background image and background-attachment: fixed;, this background image is misplaced in Safari on macOS.

It seems to me that the background image is placed as if the translate on its parent is not active (and thus shows only the right half of the image, since the left part is hidden.

.alignfull {
  left: 50%;
  max-width: none;
  position: relative;
  transform: translate(-50%);
  width: 100vw;
}

.background {
  background: url("https://via.placeholder.com/1800x800") fixed center center / cover;
  height: 400px;
  width: 100%;
}

<div class="alignfull">
<div class="background">
  Test
</div>
</div>

I already tried to change many things but don’t get it working. It seems to be a bug in Safari, but hopefully anyone has an idea how to fix it without waiting for a fix from Apple.

Since the .alignfull is used in rather many places, it’s currently no option to change its CSS.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'macOS Safari: fixed background attachment misplaced with parent translateX and left

Sources

Related Questions