Фиксированное вложение фона не работает в хроме внутри прокручиваемого элемента div

По сути, когда фоновое изображение находится внутри прокручиваемого div, оно больше не будет действовать фиксированно и просто вернется к прокрутке:

CSS:

<div class="wrapper">
  <span></span>
</div>

HTML:

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
}

.wrapper{
  width: 90%;
  height: 1000px;
  margin: 0 auto;
  overflow: scroll;
}

span{
  background-image: url(http://i.imgur.com/Q3NruNr.jpg);
  height: 1500px;
  width: 100%;
  display: block;
  margin: 0 auto;
  background-attachment: fixed;
  background-size: cover;
}

В фаерфоксе работает нормально, а в хроме не работает. Любая работа вокруг?

http://codepen.io/mattcoady/pen/BooyaZ


google-chrome css background-image background-position
person Matt Coady    schedule 09.09.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это известная ошибка в Chrome, которая случается часто, но я чувствую, что каждое исправление отличается :(

вот Codepen http://codepen.io/anon/pen/VvvYJz< /а>

Все, что я добавил, это

-webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);

к вашему тегу span, дайте мне знать, если это желаемый эффект.

Проблема Chromium https://code.google.com/p/chromium/issues/detail?id=20574

person NooBskie    schedule 10.09.2015
comment
Странно, вчера это работало, а сегодня я снова проверяю, и это больше не работает. Интересно, хром снова обновился :/ - person Matt Coady; 12.09.2015
comment
У меня работало (версия 45.0.2454.85 м) - person Dmitriy; 12.09.2015

arrow_upward
0
arrow_downward

Спасибо NooBskie, у меня это сработало, используя Modals из Bootstrap v3.3.2, чтобы показать фиксированный фон:

-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
person midur    schedule 07.10.2015