Исправлено фокусное изображение привязки/исчезновение в хроме при сочетании с преобразованием css

Ответ 1

Это была очень распространенная неразгаданная тайна. В последнее время у меня была та же проблема, и "-webkit-backface-visibility: hidden" оказался менее бесполезным (на моем "фиксированном" прикрепленном фоне), так как фон просто исчез, когда он был установлен. (Дополнительная информация: причина в том, что когда фон установлен как фиксированный, он почти похож на установку фиксированного "div" в фоновом режиме и установление прозрачного фона оригинала. Скрытая обратная сторона делает очевидным).

Чтобы решить текущую проблему, попробуйте установить " позиция" элемента как " статический", или если вы дали ему другое значение, а именно: relative ',' fixed 'или' absolute ', просто удалите их.

Если вы не помните установку свойства position, и проблема по-прежнему сохраняется, я предлагаю вам использовать инструмент отладки на chrome или firefox, чтобы

убедитесь, что для свойства 'position' не установлены вручную значения, кроме 'Статический'.

Просто потратил полчаса на поиски... Думал, это облегчило бы вам... привет.:)

Ответ 2

Такая же проблема. У меня был липкий заголовок с использованием 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... */
}

UPDATE
будущий ответ - использовать свойство 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().

Ответ 3

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

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

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

Ответ 4

У меня была такая же проблема с 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*/
}

Ответ 5

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

в моем случае я использовал базовый офф-холст, чтобы он выглядел как

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

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

Ответ 6

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

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

Ответ 7

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

background-attachment: scroll;

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

Ответ 8

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

<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), но в контейнере, который никак не был помещен. Я скопировал оверлейное абсолютное позиционирование в родительский (.popup), и он работает нормально.

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

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

Рад, если кто-нибудь помог. Отношения

Ответ 9

Похоже на ошибку в Chrome, когда вы добавляете разметку на элемент. Попробуйте удалить фон из такого элемента и присвоить ему позицию: relative. Внутри элемента добавьте новый 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>

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

Ответ 10

Еще одно обходное решение, если у вас должно быть положение: 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>

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

Ответ 11

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

ШАГ 1: добавьте эти строки в .htaccess:

# 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. спасибо Шон Альтман

Ответ 12

Моя задача состояла в том, чтобы создать страницу с эффектом параллакса. После попыток исправить это с помощью 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 будет элементом с фиксированным фоном.

Ответ 13

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

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

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

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

Ответ 14

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

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

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

2. он будет работать как в Chrome, так и в браузере IE

Ответ 15

Этот опоздал на вечеринку, но удивительное открытие, как я вижу, большинство пользователей css-фреймворка, 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 (animation.css, waypoints.js, speed.js)
удалите переход/класс, если возможно, из этого элемента или перепроверьте, когда этот элемент появится, чтобы исправить изменчивую проблему Chrome.