Исправлено вложение фоновое изображение мерцает/исчезает в chrome в сочетании с преобразованием css

та же проблема здесь. У меня был липкий заголовок, используя position:fixed; это мерцало в PC Chrome 34. Я пробовал решения в этой теме,position:static; в родителе сломались другие части. Но я знаю добавление -webkit-transform: translate3d(0,0,0); в основном Chrome превращает этот html в слой, чтобы он не перекрашивался. Это сработало для меня.

element {
  position:fixed;
  top:0;
  left:50%;
  width:960px;
  height:50px;
  margin-left:-480px;
  -webkit-transform: translate3d(0,0,0);
  /* ...all other CSS... */
}

обновление
будущий дружественный ответ-использовать will-change свойство для создания слоя!
W3 технические характеристики
CanIUse
определение MDN

element {
      position:fixed;
      top:0;
      left:50%;
      width:960px;
      height:50px;
      margin-left:-480px;
      will-change:top;
      /* ...all other CSS... */
    }

и я буду честен, это кажется странным решением для исправления мерцания, но по сути это делает элемент слоем, таким же, как translate3d().

возможно, немного поздно отвечать, но кажется, что ошибка поставляется с фоновым вложением: исправлено свойство в chrome. Я нашел решение, изменив его значение на "scroll". Это вызовет эффект jitterin на firefox, но вы можете избежать его, используя запрос медиа-браузера в своем CSS, что-то вроде этого:

.yourstellarlayer{
     background-attachment: fixed;
}
/*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .yourstellarlayer{ 
        background-attachment: scroll;
    }
}

надеюсь, что это помогает!

у меня была такая же проблема с Chrome, похоже, это ошибка, которая возникает, когда слишком много происходит внутри страницы, я смог исправить это, добавив следующий код преобразования в элемент фиксированной позиции, (transform: translateZ(0);-webkit-transform: translateZ(0);), который заставляет браузер использовать аппаратное ускорение для доступа к графическому процессору устройства (GPU), чтобы заставить пиксели летать. С другой стороны, веб-приложения запускаются в контексте браузера, что позволяет программному обеспечению выполнять большую часть (если не все) рендеринга, в результате меньше лошадиных сил для переходов. Но интернет догоняет, и большинство поставщиков браузеров теперь обеспечивают графическое аппаратное ускорение с помощью определенных правил CSS.

использование-webkit-transform: translate3d(0,0,0); запустит GPU в действие для CSS-переходов, сделав их более плавными (выше FPS).

Примечание: translate3d(0,0,0) ничего не делает в плане того, что вы видите. он перемещает объект на 0px по оси x,y и Z. Это только техника форсирования аппаратного ускорения.

#element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}

для меня проблема заключалась в стилях, прикрепленных к родительским элементам div, у которого есть фиксированный фон, я поставил -webkit-backface-visibility: inherit; двум основным родителям моего фиксированного div.

в моем случае я использовал foundation off-canvas, поэтому он выглядит так

.off-canvas-wrap{
    -webkit-backface-visibility:inherit;
}

.inner-wrap{
    -webkit-backface-visibility:inherit;
}

Это действительно беспокоило меня, и это почти испортило мою ночь. Мое исправление-установить

background-attachment: scroll;

это сработало в моем проекте.
До этого я его чинил. Надеюсь, это поможет.

у нас была аналогичная проблема с position: fixed; элемент. Этот элемент содержал относительно расположенный контейнер, содержащий абсолютно расположенное изображение. При переходе CSS изображение исчезло, когда переход был сделан, снова появилось.

мы попытались решить проблему, установив -webkit-backface-visibility to hidden на нескольких элементах, включая элемент тела, но это не помогло. С помощью этой темы мы использовали веб-инспектор Chrome, чтобы возиться с elments' position свойства и, к счастью, смогли решить проблему без необходимости изменять сайт так много. (все, что нам нужно было сделать, это изменить положение родителя фиксированного элемента на static)

вот решение, которое работает (2014.7.11) в firefox 30.0, chrome 35.0, opera 22.0, ie 11.0:

Шаг 1: Добавьте эти строки на .реврайт:

# cache for images
<FilesMatch "\.(png)$">
Header set Cache-Control "max-age=10000, public"
</FilesMatch>

• подробное описание этой проблемы и как это исправить: https://code.google.com/p/chromium/issues/detail?id=102706

Шаг 2: Добавьте предварительную загрузку изображений, например:

var pics = []; // CREATE PICS ARRAY

$(document).ready(function(){
    ...
    preload(
        '/public/images/stars.red.1.star.png',
        '/public/images/stars.red.2.star.png',
        '/public/images/stars.red.3.star.png',
        '/public/images/stars.red.4.star.png',
        '/public/images/stars.red.5.star.png',
        '/public/images/stars.empty.png'
    );
    ...
    $('.rating').on('mousemove', function(event){
        var x = event.pageX - this.offsetLeft;
        var id = getIdByCoord(x); //
        if ($(this).data('current-image') != id) {
            $(this).css('background-image', 'url(' + pics[id].src + ')');
            $(this).data('current-image', id);
        }
    })
    ...
})

...

// PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
    for (i = 0; i < arguments.length; i++) {
        pics[i] = new Image();
        pics[i].src = arguments[i];
        // alert("preload " + arguments[i]);
    }
}

P. S. Спасибо Шон Альтман!--3-->

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

JavaScript:

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome)
{

    var itemArr = $('.slider-title');

    $(window).scroll(function()
    {
        var pos = $(window).scrollTop();
        var wh = window.innerHeight;

        $(itemArr).each(function(i, item){

            var p = $(item).position();
            var h = $(item).height();
            if (p.top + h > pos && p.top < pos+wh)
            {
                // items ir redzams
                var prc = (p.top - pos +h)/wh ;
                //console.log(prc);
                $(item).css({'background-position':'center '+prc+'%'});
            }

        });
    });

}

CSS:

    /*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .slider-title{ 
        background-size:auto;
        background-position: center 0%;
    }
}

.slider-title будет элементом с фиксированным фоновым вложением.

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

<section style="background-attachment: fixed;">
 <div style="position: relative;">
  // Code goes here including absolute posiioned elements
 </div>
</section>

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

надеюсь, что это помогает.

У меня также были те же проблемы в chrome

Это очень просто нет необходимости добавлять любой тег webkit & media просто выполните следующие действия

1.вместо фона: url ("путь к изображению") установите изображение, как показано ниже, и установите положение как фиксированное

2. он будет работать в chrome, а также IE browser

этот опаздывает на вечеринку, но удивительное открытие, как я вижу, в основном пользователи CSS framework, Bootstrap, Foundation (другие) имеют проблемы , и я уверен, что у многих из вас также есть прокрутка до верхних функций js, которые показывают прокрутку до верхней кнопки, когда пользователь начинает прокрутку вниз,

Если у вас есть что-то подобное ( Bootstrap имеет встроенный )

.fade {
    opacity: 0;
    -webkit-transition: opacity .35s linear;
    -o-transition: opacity .35s linear;
    transition: opacity .35s linear;
}
.fade.in {
    opacity: 1;
}

или вы показываете какой-то элемент через ,

-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;

или вы добавляете какой-либо элемент или класс элементов с переходом, при прокрутке вниз, через js (анимация.css, путевые точки.Яш, скорость.в JS )
удалите переход / класс, если это возможно, из этого элемента или перепроверьте, когда этот элемент появляется, чтобы исправить проблему choppy Chrome.

добавить transform свойство вашего элемента с фиксированным фоновым изображением. Вы можете иметь любую заданную позицию.

#thediv {
    width: 100%;
    height: 600px;
    position: relative;
    display: block;
    background-image: url(https://cdn.shopify.com/s/files/1/1231/8576/files/hockeyjacket1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 10px solid black;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

https://jsfiddle.net/rkwpxh0n/2/

у меня была эта проблема на overlay div ниже всплывающего окна (случайно исчезает в opera 20) - как анимированные, так и активированные скриптом.

<div class="popupwrapper">
    <div id="popupdownload" class="popup">
        <h1>Test</h1>
    </div>
    <div class="popupoverlay"></div>
</div>

.popupwrapper {
display:            none;
z-index:            9100;
}
.popupwrapper.active {
display:            block;
}
.popupwrapper > div {
-webkit-transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
-moz-transition:    opacity 150ms ease-in-out, -moz-transform 150ms ease-in-out;
-ie-transition: opacity 150ms ease-in-out, -ie-transform 150ms ease-in-out;
transition:         opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.popupoverlay {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
background:         rgba(26,26,26,.9);
opacity:            0;
}
.popup {
position:           fixed;
top:                30%;
left:               40%;
padding:            48px;
background:         #e6e6e6;
z-index:            9101;
-webkit-transform:  scale(1.6);
transform:          scale(1.6);
opacity:            0;
}
.popupoverlay.active {
opacity:            1;
}
.popup.active {
-webkit-transform:  scale(1);
transform:          scale(1);
opacity:            1;
}

наложение было расположено абсолютно (.popupoverlay), но в контейнере, который никак не позиционировался. Я скопировал абсолютное расположение overlay в parent (.popup), и он работает нормально.

.popupwrapper {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
display:            none;
z-index:            9100;
}

Я думаю, что проблема появляется только тогда, когда позиционирование родительских элементов не очевидный.

рад, если помог кому-нибудь. С уважением

Кажется, ошибка в Chrome в момент добавления любой разметки на элементе. Попробуйте удалить фон из такого элемента и дать ему положение:относительное. Внутри элемента добавьте новый div с необходимыми размерами и добавьте фон, просто не добавляйте в него разметку.

пример:

ток:

<div class="container" style="background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

исправлено:

 <div class="container" style="position:relative;">
     <div class="added-background" style="position:absolute;width:100%;height:100%;background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

надеюсь, что это помогает!

другой обходной путь, если вы должны иметь position: fixed / relative / absolute возможно, потому что у вас есть абсолютно позиционированный элемент внутри (как и в моем случае), чтобы создать оболочку div внутри мерцающего div и переместить свойство position и background на это.

например

вы -

<div class="background-flickers' style="background:url('path-to-image'); position:relative">
 <absolutely positioned element>
</div>

возможный обходной путь

<div class="no-more-flicker!">
 <div class="wrapper" style="style="background:url('path-to-image'); position:relative">
  <absolutely positioned element>
 </div>
</div>

у меня больше нет мерцания, по-видимому, ошибка мерцания не спускается к ребенку стеклотара.