在使用 Next.js 搭配 next/image 與 react-fast-marquee 或自製跑馬燈動畫時，我遇到了一個難以捉摸的問題：圖片偶爾會「突然消失」，但只要滑鼠一動或按個鍵盤，它們又會神奇地出現。

這讓我一度以為是動畫套件的 bug、載入順序的問題，甚至懷疑是不是 React hydration 對不上。但最後真正的關鍵，其實是一組 CSS。

問題

圖片在畫面上滑動一段距離後會突然消失。
重新整理頁面可能會好，但也可能又發生。
滑鼠一移動、畫面有 reflow，圖片馬上又顯示出來。

嘗試過的解法

✅ 圖片全部 preload 再開始動畫

✅ next/image 加上 priority or loading=”eager”

✅ GPU 加速 (transform: translateZ(0))

✅ 調整速度、圖片尺寸

…都沒解決。

最終成功的 CSS 解法

這組 CSS 讓我完全解決了圖片消失問題：

.marquee img {
  width: 100% !important;
  object-fit: contain;
  position: relative !important;
  height: unset !important;
}

為什麼有效？

width: 100%：確保圖片不會受到 Image 預設 inline style 影響（有時會設定寬度為 auto）

object-fit: contain：避免圖片拉伸

position: relative：避免瀏覽器優化或 layout 渲染失敗造成跳格

height: unset：解除 next/image 自動插入的 height 限制

這一組樣式成功避免了圖片在動畫過程中被「判定為不需要顯示」而被瀏覽器優化掉的問題。

這是一個非常難 debug 的問題，因為它不是 100% 重現。若你也在做圖片輪播或跑馬燈時遇到「消失」或「閃爍」問題，可以試試這組 CSS，也許會像我一樣被救了一命。

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。