CODEWITHSUNDEEP
css
Fekla
Fekla

Reputation: 21

Why background image with attachment:fixed and transform:scale moves on scroll?

Background acts as expected without transform:scale

after adding transform:scale value unwanted parallax effect appears: http://codepen.io/fekla/pen/VmqPZa (scroll down). 

  <div class="holder">
    <div class="image"></div>
  </div>


html,body {
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
} 
.holder {
  width:100%;
  height:100%; 
  background-color:black;
  overflow: hidden;
}
.image {
  width:100%;
  height:100vh;   
  background-image: url(http://lorempixel.com/output/nature-q-c-884-338-5.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center; 
  transform: scale(1.25);    
}

Upvotes: 2

Views: 213

Answers (1)

Victor Radu
Victor Radu

Reputation: 2292

seems to be a known Webkit bug: https://bugs.chromium.org/p/chromium/issues/detail?id=20574 P.S. also there seems to be little interest in actually fixing it

Upvotes: 2

Related Questions