上網時碰到一個怪網頁,頁面從頭到尾內容空空如也?


(敏感資訊已模糊處理)

但是換另一台電腦,上同樣的網站,顯示又是正常的,難道是電腦壞了?

  • 本以為是圖片被 AdGuard 之類的擋掉,但是查詢發現圖片都有正常載入,直接開圖片 url 也是正常的。
  • Console 裡的 Javascript 沒有特別的嚴重錯誤。
  • Google Chrome 瀏覽器換無痕模式、更換瀏覽器為 Firefox, Safari,都無法正常顯示,所以應該跟瀏覽器擴充套件無關。
  • 雖然看不到東西,但胡亂點擊可能有東西的地方,碰到超連結是有反應的。

查了老半天,最後發現不是自己電腦壞了,而又是在幫別人的網頁 Debug。
簡單來說,就是想說把作業系統設定成減少動畫,電腦跑起來會比較順?
結果反而造成網頁顯示出問題。

以下是檢查流程與各種歷史淵源:

發現這些看不到的東西,都有設定在大於一個可視區域寬度範圍時透明度為0,推測應該是有淡入進場之類的效果,

@media (min-width: 769px){
.anim {opacity: 0;}
}

然後動效是用 animate.css,一個免費開源的CSS樣式庫,這也很普通,沒什麼特別的。

檢查元素後發現有一段

@media (prefers-reduced-motion){
.animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}

因為 css animation 動畫效果被覆蓋,所以元素都保持在透明度0的狀態,當然就沒有正常顯示,還好不是我電腦壞了。

查了一下 prefers-reduced-motion,又是 a11y 的相關產物,是用於偵測使用者裝置是否有設置減少動畫效果,又是一個立意不錯,但是可能搞到開發者的東西。
各大主流作業系統的設定位置:
macOS :系統偏好設定>輔助使用>顯示器>減少動態效果
Windows 10 :設定>輕鬆存取>在 Windows 中顯示動畫
iOS15:設定>輔助使用>動態效果>減少動態效果
Android 11(以Samsung One UI 3.1為例):設定>協助工具>改善可見度>移除動畫

那段一堆 !important 的 CSS 碼,來源看起來是引用的 animate.css 裡面附贈的,看了一下 animate.css 的 release log,在 24 Jul 2018 的時候,於版本 3.7.0 開始加入了對 prefers-reduced-motion 的支援,逛到這個有問題的網站,剛好就是用 3.7.0 版(寫文章時是 2022/2,當下的最新版是4.1.1)。
animate.css 動效樣式庫的官網有呼籲不要把這段拿掉

Don’t disable the prefers-reduced-motion media query
Since version 3.7.0 Animate.css supports the prefers-reduced-motion media query which disables animations based on the OS system’s preference on supporting browsers (most current browsers support it). This is a critical accessibility feature and should never be disabled! This is built into browsers to help people with vestibular >and seizure disorders. You can read more about it here. If your web-thing needs the animations to function, warn users, but don’t disable the feature. You can do it easily with CSS only. Here’s a simple example:

Bootstrap 4.x 跟 5 也有針對 prefers-reduced-motion 另外做一些設計,Bootstrap includes support for the prefers-reduced-motion media feature,不過看起來比較沒有這麼災難性,頂多就是 btn hover 的變色沒有轉場,modal 顯示沒有任何轉場之類的。

到其他網站試試,例如 Apple 的產品介紹頁(如 iPhone13 Pro),在設定了取消動畫效果之後,本來會動來動去的內容,就真的不會動了,而且也能正常顯示跟瀏覽,真的有為 a11y 做調整,品牌的高度果然不一樣。
反觀 Samsung, ASUS ROG,取消動畫效果,看網頁時一樣是內容飛來飛去的。

所以如果很不幸碰到使用者一樣跟我亂動作業系統設定的,
要是網站用更舊版本 animate.css 的,仍然會正常顯示,
用 IE 瀏覽器開這網站,也會正常顯示(IE 不認得 prefers-reduced-motion 這東西),
要是網站沒有將元素預設 opacity 0 做淡入效果的,仍然會正常顯示,

但恰恰就這三個巧合,網站用了 animate.css 版本 3.7 以上的樣式庫、使用者用了支援 prefers-reduced-motion 的瀏覽器、網站將元素預設 opacity 0,造成這次的問題。

那我為什麼要去改作業系統設定,設定減少動畫效果?
原來是之前電腦卡頓,想說把作業系統的動畫效果關掉,可能電腦會跑比較順?
結果順暢度是沒什麼改善,上網時比較困擾倒是真的。