Chrome CSS проблемы фонового изображения с анимацией

Здесь ссылка на код https://jsfiddle.net/pk7zetdu/6/Chrome CSS проблемы фонового изображения с анимацией

$('.img_cont').addClass('rollIn'); 

    setTimeout(function(){ 
    $('.img_cont').removeClass('rollIn').addClass('rollOut'); 
    }, 3000); 

    setTimeout(function(){ 
    $('#img_img').attr('src', 'http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'); 
    $('.img_co....

Попробуйте открыть его с последним стабильным хромом для окон.

Первый раз, когда он загружается, вы можете видеть, как слайд (div) катится и выкатывается, чем изображение SRC изменяется, а div во второй раз включается с новым bg (возможно, с небольшой задержкой загрузки img). Все в порядке!

Затем нажмите кнопку RUN в скрипке и посмотрите еще раз. Теперь вы можете видеть, как слайд (div) катится и выкатывается, чем изображение SRC изменяется, но оно переходит с предыдущим изображением в bg и изменяет его сразу после завершения анимации.

Я могу гарантировать, что это не имеет ничего общего с загрузкой изображения или скрипкой, потому что это большая проблема в моем реальном проекте. -webkit-backface-visibility: hidden; на IMG решает эту проблему, но вводит другие проблемы в более серьезных примеров :(.

Любые идеи?

================ UPDATE

Когда я изменяю непрозрачность на .rollOut на что-то не равное нулю (https://jsfiddle.net/pk7zetdu/8/), проблема исчезла. Похоже, что когда opacity родителя img равно 0, хром не настраивает новый SRC и имеет проблемы с его настройкой во время анимации.

источник

2016-04-04 Janis Taranda

Я не могу воспроизвести это –

Может ли это совпадение с тем, сколько времени требуется для загрузки изображения? попробуйте и убедитесь, что изображения загружены до истечения времени ожидания. – Beep

Не думайте так. См. Обновление https://jsfiddle.net/pk7zetdu/6/. Загрузка не должна быть проблемой. 3 секунды полезно загружать :) –

У вашего второго изображения есть тень вокруг всех его сторон. Вы можете видеть, что если вы откроете изображение на вкладке (вы увидите, что изображение имеет некоторый промежуток от вершины и оставил). Итак, ваше второе изображение не загружается с первым изображением в фоновом режиме. Его просто второе изображение, которое имеет белый пробел вокруг него.

Изменение изображений сделает трюк. Проверьте эту скрипку на разные изображения. - https://jsfiddle.net/pk7zetdu/11/

Что касается второго изображения не выкатывает через 3 секунды, вы можете изменить setTimeout к setInterval

источник

2016-04-04 14:26:41

Такая же ошибка в вашем примере. Вы не поняли мою проблему, или вы не можете воспроизвести ее. Прочитайте комментарий Бипа, он был ближайшим. –

Вы говорите о разрыве между свертыванием 1-го изображения и прокатом второго? –

Когда div начинает катиться во второй раз, отображается старый фон. И изменилось только после окончания анимации. –

в этом было хромированный март построена ошибка. Он исправлен в новейшей версии. Во всяком случае (если вам нужна версия марша), быстрое исправление заключается в том, чтобы установить Opacity на что-то вроде 0.0001 вместо 0 при исчезновении. Нет хорошего решения.

источник

2016-04-05 07:12:09

Это не дает ответа на вопрос. Чтобы критиковать или просить разъяснения у автора, оставьте комментарий ниже их сообщения. - [Из обзора] (/ review/low-quality-posts/11896144) – Serjik

Отредактированный ответ ... –

Chrome CSS проблемы фонового изображения с анимацией

ответ

Смежные вопросы