Background-position: fixed not behaving when ancestor is transformed

user_1750282 0
Viewed 110

A simple example:

.wrapper{
  height: 500px;
  width: 500px;
  background: black;
  overflow: auto;
  transform: translateZ(0);
}
.content{
  background: linear-gradient(150deg, rgba(255,255,255, 0) 46%, rgba(255,255,255, 0.02) 46.1%, rgba(255,255,255, 0.03) 50.1%, rgba(255,255,255, 0.02) 53.9%, rgba(255,255,255, 0) 54%);
  margin: 50px;
  height: 200px;
  width: 300px;
  border: 1px solid #fff;
  background-attachment: fixed;
}
<div class="wrapper">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
</div>

The background image isn't remaining fixed when any ancestor has any transformation, so far as I've tried (Chrome). Is this a bug or expected behavior? Is there any non-js workaround to make it behave?

css
1 Answers

This is working as intended when you use background-position: fixed; the background is positioned relative to the viewport. Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always creates a new stacking context. When an ancestor has the transform property set to something different than none then this ancestor is used as a container instead of the viewport. There is no way to position the background relative to the element when using background-position: fixed; but you can achieve a similar desired result by using a position: fixed; pseudo element. this is at least what I understood from your question.

user_143407410
Related