一個有趣的 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: #eee;
border: 20px solid #eee;
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 參與社群迴響

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

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

    轉推這篇文章

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

    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.


    訂閱 blog 掌握最新文章

    訂閱 RSS 更新,複製 xml 網址

    加入 Google Groups 訂閱電子報

    追蹤我的 Medium,文章異步更新

    Other Posts