Странное различие в поведении на CSS Переход с Chrome 68 на 69 - PullRequest
Новая
       6

Странное различие в поведении на CSS Переход с Chrome 68 на 69

0 голосов
/ 08 сентября 2018

Недавно, продолжая работу над расширением Chrome, я заметил, что обновление с 68 до 69 вызвало нежелательное поведение.

У меня есть iframe, который «минимизируется» путем добавления класса, содержащего right: -360px (таким образом отталкивает его от экрана), и «maximized» удаляет этот класс и имеет right: 0px; (таким образом, отображая iframe справа экрана).

Кажется, все работает нормально. Тем не менее, у меня также есть 

transition: width 0.5s, right 0.5s;

для предоставления «скользящей анимации» при выполнении этих действий. В Chrome 68 все это работало нормально (iframe заполнял правильное пространство). Однако в Chrome 69 iframe отображается в «начальной точке» перед переходом, и отображается только одна небольшая часть. Похоже, это работает так, потому что, когда я устанавливаю таймер перехода короче, отображается больше iframe. Если я удаляю весь переход целиком, весь iframe отображается идеально при нажатии.

Временное исправление - удалить переход на некоторое время. Но я бы предпочел этого избежать. Есть ли другое потенциальное решение, которое я мог бы использовать?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 08 сентября 2018

JavaScript onLoad

Вы можете загрузить iFrame после загрузки страницы, используя событие onLoad . 

<body onload="load-iFrame()">

CSS-анимация и задержка

Вы также можете использовать анимация-задержка и анимации ключевых кадров вместо переходов. 

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 5s infinite; 
    -webkit-animation-delay: 1s;
    animation: mymove 5s infinite;
    animation-delay: 2s;
	opacity: 0;
}
@-webkit-keyframes mymove {
    from {opacity: 0; right: -360px;}
    to {opacity: 1; right: 0;}
}
@keyframes mymove {	
    from {opacity: 0; right: -360px;}
    to {opacity: 1; right: 0;}
}
</style>
</head>
<body>
<h1>Keyframe Animations</h1>
<p>Replace the block with an iFrame</p>
<div></div>
</body>
</html>
0 голосов
/ 08 сентября 2018

Если я правильно понял вашу проблему - попробуйте вообще не использовать переход width. Если вам нужно показать этот iframe в определенном пространстве страницы (не на правой границе экрана), вы можете использовать контейнерную оболочку с overflow: hidden.

Пожалуйста, проверьте: http://jsbin.com/lamejumigu/edit?html,css,output

...