Проблема с Chrome с фиксированными фиксированными элементами фиксированной и фиксированной позиции

У меня была эта проблема на некоторое время, и это, похоже, ошибка перерисовывания Chrome, которая не была исправлена. Поэтому я ищу любые исправления стоп-залов.

Основная проблема заключается в том, что когда элемент на странице имеет фоновое изображение, которое использует:

background-attachment: fixed;

Если другой элемент исправлен и имеет дочерний элемент видео, он вызывает исчезновение элемента с фоновым изображением.

Теперь он отлично работает в Safari (и Firefox и IE), так что это не проблема Webkit. Я применил несколько свойств, которые были предложены безрезультатно.

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

Начальная демонстрация

В настоящее время мое решение состоит в том, чтобы нацелить элементы с фиксированным изображением bg через медиа-запрос и просто отключить свойство фиксированного фона.

@media screen and (-webkit-min-device-pixel-ratio:0) {
background-attachment: scroll;
}

~~Любые идеи?~~

Update

~~Работая демонстрация благодаря Даниэлю.~~

Обновление 2

Лучшее демо!

Shoutout для somesayinice и Сообщение о блоге FourKitchens

Ответ 1

Нашел это решение на: https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property

Мне кажется, что это умный способ: перед псевдоэлементом. Ограничьте ширину элементов фиксированной ширины, но отлично справляйтесь со страницами полной ширины. Существенно выглядит так:

.background_fill {
  overflow: hidden;
  position: relative;
    color: red;
}
.background_fill:before {
  background-color: white;
  background-size: cover;
  z-index: -3;
  content: " ";
  position: fixed;
  background: url('http://www.lausanneworldpulse.com/pdfs/brierley_map_0507.jpg') no-repeat center center;
  will-change: transform;
  width: 100%;
  height: 100%;
}

<div class="background_fill">
  <div>this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background this is on a background</div>
  <div>this is on a background</div>
  <div>this is on a background</div>
  <div>this is on a background</div>
  <div>this is on a background</div>
  <div>this is on a background</div>
</div>

Ответ 2

Так как фиксированный позиционный фон, по-видимому, прерывается без причины в Chrome, вы можете попытаться воспроизвести его с помощью свойств clip и position:fixed. Это не очень хорошо известно, но свойство клипа, когда оно установлено на абсолютном позиционированном элементе, фактически даже обрезает фиксированные позиционированные дочерние элементы.

Однако есть некоторые недостатки. Самое главное, этот трюк, к сожалению, не работает безупречно на iOS по какой-то причине, тогда как браузер имеет проблемы с отображением всего изображения во время прокрутки пользователя (вы, похоже, получаете эффект pop-in). Это не что-то слишком крупное, но, возможно, что-то, что вы должны принять во внимание. Конечно, вы все равно можете обойти это, используя, например, некоторый умный javascript, который возвращается к фиксированному фону. Другое обходное решение iOS - это просто использование -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%), которое в основном является альтернативой webkit для clip: rect(auto,auto,auto,auto) (т.е. Обрезает все за пределами контейнера).

Я сделал JSFiddle (код не играл со мной) пример реализации, как вы можете это сделать. Посмотрите конкретно на .moment, .moment-image и новый .moment-clipper.

Надеюсь, это поможет!

Обновление: клип теперь устарел в пользу клипа, но по-прежнему поддерживается во всех браузерах. Однако такой же эффект можно достичь с помощью:

-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
overflow: hidden;

position: absolute больше не требуется на контейнере. Поддержка клип-пути, по-видимому, относительно ограничена, и только Chrome и Safari в настоящее время поддерживают ее с помощью префиксов. Самая безопасная ставка, вероятно, включает в себя как клип, так и клип, поскольку они не мешают друг другу.

Я обновил скрипку выше, чтобы включить клип-путь.

Ответ 3

Поздний ответ, но я пришел с этим, и как-то я сделал взлом для этого.

Идея заключалась в создании внутреннего элемента, который будет удерживать фоновое изображение и будет действовать так же, как и свойство background-attachment:fixed.

Поскольку это свойство делает положение фонового изображения относительно окна, мы должны перемещать внутренний элемент внутри него контейнера, и таким образом мы получим этот эффект.

var parallax_container = $(".parallax_container");
/*Create the background image holder*/
parallax_container.prepend("<div class='px_bg_holder'></div>");
$(".px_bg_holder").css({
    "background-image" : parallax_container.css("background-image"), /*Get the background image from parent*/
    "background-position" : "center center",
    "background-repeat" : "no-repeat",
    "background-size" : "cover",
    "position" : "absolute",
    "height" : $(window).height(), /*Make the element size same as window*/
    "width" : $(window).width()
});
/*We will remove the background at all*/
parallax_container.css("background","none");
parallax_container.css("overflow","hidden");/*Don't display the inner element out of it parent*/
$(window).scroll(function(){
    var bg_pos = $(window).scrollTop() - $(".parallax_container").offset().top; /*Calculate the scrollTop of the inner element*/
    $(".px_bg_holder").css({
        "margin-top" : bg_pos+"px"
    });
});
$(window).resize(function(){
    $(".px_bg_holder").css({
        "height" : $(window).height(),
        "width" : $(window).width()
    });
});

Ответ 4

Привет, это очень просто, не нужно добавлять какие-либо теги webkit и media, которые следуют ниже

Я удалил фоновый тег Url в контейнере ниже.

.content.container { /* background: url (http://beeverlyfields.com/wp-content/uploads/2015/02/bgBeeverly4.jpg); */

Я добавил тег img src в class= "контейнер" и положение как фиксированное, а top = 0

теперь он работает в chrome-40 и IE

Ответ 5

Как видно на это отличное перо Рафаэль Ричецкий, translate3d может быть нарушителем спокойствия.

Если вы используете transform: translate3d(0,0,0), попробуйте заменить его на transform: translate(0,0), и он должен сделать трюк. По крайней мере, это сработало для меня.

Ответ 6

Моя проблема в том, что у меня есть анимационный 3D-преобразование hover div в документе

.anim-y360:hover {
    -webkit-transform: rotateY(360deg);
    ...
}

Каждый раз, когда я запускаю анимацию, фиксированное изображение исчезает.

Решение было простым:

.anim-y360 {   
   z-index: XX;
   ...
}

Где XX выше, чем z-индекс изображения фиксированной позиции.

Ответ 7

Эта проблема обычно возникает из-за видео HTML5. Просто оберните его в элемент dom с положением правил стиля: relative; и переполнение: скрыто; Это исправит все во всех браузерах!

Ответ 8

Я нашел решение от https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

В моем случае просто передайте это свойство в фиксированный фон div.

will-change : transform;