電腦開了這個之後，害別人用了 animate.css 樣式庫的網站顯示異常
(敏感資訊已模糊處理)
但是換另一台電腦，上同樣的網站，顯示又是正常的，難道是電腦壞了？
- 本以為是圖片被 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，造成這次的問題。
那我為什麼要去改作業系統設定，設定減少動畫效果？
原來是之前電腦卡頓，想說把作業系統的動畫效果關掉，可能電腦會跑比較順？
結果順暢度是沒什麼改善，上網時比較困擾倒是真的。