作業系統設定減少動態效果，害別人用了 animate.css 樣式庫的網站顯示異常

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

(敏感資訊已模糊處理)

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

第一階段排查過程

檢查了可能出問題的地方:

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

查了老半天，最後發現不是自己電腦壞了，而又是在幫別人的網頁 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 是什麼東西

查了一下 prefers-reduced-motion，又是 a11y 的相關產物，是用於偵測使用者裝置是否有設定「減少動畫效果」，當碰到這種裝置，可以用 CSS 的 prefers-reduced-motion 來針對這種裝置做特殊處理。

聽起來立意不錯，但是可能搞到網頁工程師的東西。

各大主流作業系統的設定位置：
macOS ：系統偏好設定>輔助使用>顯示器>減少動態效果
Windows 10 ：設定>輕鬆存取>在 Windows 中顯示動畫
iOS15：設定>輔助使用>動態效果>減少動態效果
Android 11(以Samsung One UI 3.1為例)：設定>協助工具>改善可見度>移除動畫

位置可能會換，但反正名稱就叫「減少動畫」或「移除動畫」之類的。

animate.css 對減少動態效果的處理方式

那段用了 prefers-reduced-motion media query 和一堆 !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)。

程式碼有問題，就把他改掉?

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 的產品網站，在系統設定取消動畫效果，看網頁時，內容還是一樣到處飛來飛去的，有這團隊整天講 UX、使用者體驗，結果只是放在嘴邊講講而已，還不是 lin-bay design driven、deadline design driven。

不是每個人都會碰到

不是每個跟我一樣亂動作業系統設定的人，都一定會碰到網站動畫顯示異常:

• 網站用更舊版本 animate.css 的，仍然會正常顯示(因為根本沒針對減少動態效果去做處理)
• 用 IE 瀏覽器開這網站，也會正常顯示(因為 IE 根本不認得 prefers-reduced-motion 的 media query)
• 網站沒有將元素預設 opacity 0 做淡入效果的，仍然會正常顯示

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

如果是用 WordPress 或什麼 CMS 平台建置的網站，物件屬性選單有一些動畫效果，背後可能也有用到 animate.css 的樣式庫，所以也會碰到這種鳥問題。

可憐的網頁設計人員可以做什麼

• 網頁不要做動態效果。(被打)
• 修改 animate.css 的套件原始碼，把官方聲明當放屁，就是要把那段拿掉。就算使用者開了減少動畫效果，也要讓網頁上的東西飛來飛去的，不然老闆會說這網頁設計很無聊。
• 針對有減少動畫效果的使用者做補救措施，例如淡入進場的自己加一堆@media (prefers-reduced-motion){.animated {opacity:1 !important}}把透明度0的東西直接顯示；往上飛入之類的再加另一段@media (prefers-reduced-motion){.animated {transform: none !important}}，一堆 !important 跟補不完的規則，改到後來可能還不如直接拿掉動畫效果或改套件原始碼。
• 改用其他動畫效果套件，但搞不好也遇到同樣的問題。
• 跟別人有仇時，在網頁上加一堆這種效果，想像一下花一堆廣告費，結果有些訪客點廣告進來網站，只能看到空空如也的畫面，非常悲劇。
• 當然行銷公司也可以用這招洗客戶，業務自己把系統設定打開，剛好碰到有這種問題的網頁，然後說網頁公司的網頁在他們公司都打不開，一般訪客可能也一樣，要趕快換成他們家的網站系統，每年只要XXXXX元，還送(下略 50000 字)
• 看到使用者的網頁顯示不正常時，他X的多一個地方要排查，檢查使用者電腦的設定、重新設定印表機列印版面、教基本文書操作和圖片修改，整天做這些事就飽了。

當然行銷公司也可以用這招洗客戶，業務自己把減少動態效果的系統設定打開，剛好碰到有這種問題的網站，然後趁機說網頁公司的網頁在他們公司都打不開，一般訪客可能也一樣，要趕快換成他們家的網站系統，每年只要XXXXX元，還送(下略 50000 字)

想要整網頁設計師的也可以用這招，有些網頁設計師可能只是用套裝軟體或其他懶人法來「做設計」，只知道在軟體裡面選「向上淡入」，或是在物件上增加一些 fadeInUp 之類的套件提供的屬性值，根本不知道背後的程式碼和瀏覽器幹了什麼事，也無法理解為什麼動畫效果出不來。

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