一個有趣的 Chrome 自動觸發 transition 轉場動畫 bug - Jason's Web Memo

一個有趣的 Chrome 自動觸發 transition 轉場動畫 bug

某天我在製作 css transition 的時候意外發現,transition 效果居然在網頁載入的時候就自行觸發,效果如上面 iframe 嵌入所示,iframe 連結在此 reproduce link,而其中 html css 內容如下:

.foo {
box-sizing: border-box;
width: 280px;
padding: 20px;
font-size: 24px;
height: 210px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
background-color: #bb0000;
color: #ddd;
border: 20px solid #ddd;
border-radius: 1em;
transition-duration: 5s;
}
<html>
<head>
<meta charset="utf-8" />
<title>Chromium's Blink bug demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/img/bug.css" />
</head>
<body>
<p class="foo">如果在 Chrome 看到自動播放的動畫,代表這個 bug 還沒修好。</p>
<form hidden="">
<input />
</form>
</body>
</html>

而根據 css 的 spec ,transition 轉場動畫應該會在 css property value 發生變化的時候才會觸發

Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.

可以觀察到自動觸發的 transition 動畫是從 user-agent stylesheet default 值變化成 css 設定值。本來懷疑是不是我在 js 的操作中有不小心讓瀏覽器 reflow 導致 transition 被觸發,但發現這樣的行為只有在 Chrome 瀏覽器上第一次載入頁面的時候才會發生,而載入後重新整理後這樣的行為就會自動消失了,需要過了一段時間重新整理才會重現,而且在其他瀏覽器都無法重現這樣的行為,因此才懷疑是不是 Chrome 的 bug。

經過一番努力 google 以後,在 stackoverflow 上看到這個問題,解答指出這是一個從 2012 躺到現在尚未修復 Chrome 的 bug ,觸發條件相當特別:

  1. 網頁上必須要有 <input /> tag
  2. transition element style 必須是要靠 external css 如 <link rel="stylesheet" href="style.css">
  3. 頁面中沒有 inline script 如<script></script>

這時候原本預期必須等到 style value 改變的才會觸發的轉場動畫,就會在 page load 的時候自動觸發。

reproduce 的頁面: https://lab.laukstein.com/bug/input

work around

像我遇到的是 transform 類的 transition 被自動觸發,我使用的 work around 的解法就是調整 element 的初始位置讓一開始的 transform 為 0,就不會有位置上的轉場,或者讓頁面使用 inline style 或 inline script 讓其條件不滿足也可以修正這樣的行為。

Ref:

  1. https://stackoverflow.com/questions/14389566/stop-css-transition-from-firing-on-page-load
  2. https://lab.laukstein.com/bug/input
  3. https://bugs.chromium.org/p/chromium/issues/detail?id=167083
  4. https://bugs.chromium.org/p/chromium/issues/detail?id=332189

Webmention 社群迴響 32

喜歡 23
轉推 9
引用或評論 0

    用 Webmentions 參與社群迴響

    透過 twitter 轉推,你的轉推評論之後會更新在上面社群迴響的引用評論列表。

    轉推這篇文章

    如果你的 blog 文章想要引用本文,歡迎透過下方表單用將你的 blog 文章網址傳送給我,若你的 blog 文章含有正確的本文網址連結,並且 blog 文章本身支持 microformat,之後你的引用資訊會更新在上面社群迴響的引用評論列表。

    社群迴響將不定期更新,不保證同步,同時有資料缺漏的可能性。最新回應請參考以下連結:

    Jason Chen - Yahoo Taiwan EC Web frontend engineer currently. Write something about web and React.js here

    Jason Chen

    Yahoo Taiwan Sr. Frontend Engineer. Write something about web and React.js here.

    Other Posts