網(wǎng)站舉報查詢,中國前500強企業(yè)排名,服裝商城網(wǎng)站模板,網(wǎng)站建設方案范文1000字前言 在使用Swiper庫的 creative 模式時#xff0c;當slide有包裹層。包裹層中的圖片被多層元素包裹、同時經(jīng)過 transform 動畫的場景。在使用 Swiper 的 creativeEffect、centeredSlides、slidesPerView: auto 等配置時#xff0c;很多開發(fā)者會在 iOS Safari 上遇到圖片滑動…前言在使用Swiper庫的creative模式時當slide有包裹層。包裹層中的圖片被多層元素包裹、同時經(jīng)過 transform 動畫的場景。在使用 Swiper 的creativeEffect、centeredSlides、slidesPerView: auto等配置時很多開發(fā)者會在iOS Safari 上遇到圖片滑動時閃爍、抖動或短暫消失的問題。這個現(xiàn)象尤其容易出現(xiàn)在圖片被多層元素包裹、同時經(jīng)過 transform 動畫的場景。本文將從瀏覽器渲染原理出發(fā)解釋這一問題的原因并給出最穩(wěn)妥的解決方案。一、問題表現(xiàn)近期在開發(fā)中需要使用 Swiper 的在 iOS 瀏覽器中使用Swiper插件的creative模式時在滑動 Swiper 時圖片短暫閃白滑動過程中圖片抖動、消失、重新出現(xiàn)只有 iPhone 上出現(xiàn)Android/PC 不復現(xiàn)給圖片加上transform: translate3d(0,0,0)后立刻不閃了二、核心原因圖層Compositing Layer導致的渲染路徑切換iOS Safari 在處理應用了 transform/scale 的圖片時如果這些元素沒有被提升為獨立 GPU 合成層compositing layer可能會在滑動期間發(fā)生重復 rasterization重新柵格化圖層回退到 CPU 重繪合成層來回切換layer thrashing這些行為都會導致滑動中的畫面“閃一下”看起來像閃爍或消失。Swiper 的 creative effect 會對 slide 進行 translate/scale/rotate這使得瀏覽器需要判斷元素是否要進入合成層如果判斷不明確就會在動畫中頻繁切換渲染路徑從而出現(xiàn)閃爍。三、為什么加transform: translate3d(0,0,0)可以解決因為這是一個“強制提升為 GPU 合成層”的經(jīng)典技巧。當你對元素使用/* by 01130.hk - online tools website : 01130.hk/zh/json2java.html */ transform: translate3d(0, 0, 0);或/* by 01130.hk - online tools website : 01130.hk/zh/json2java.html */ transform: translateZ(0);iOS Safari 會認為該元素“參與 3D transform”從而將它提升為獨立的 GPU 紋理層compositing layer之后所有動畫由 GPU 合成不需要反復 rasterize避免了動畫中渲染路徑切換導致的閃爍因此只要讓圖片本身進入 GPU 層就能穩(wěn)定、不閃爍地移動。四、為什么有 wrapper包裹層更容易閃爍如果你的結構是div classswiper-slide div classimg-wrapper img src... /div /divSwiper 的 transform 是作用于 .swiper-slide 的而圖片實際渲染則在 img 里。瀏覽器需要同時考慮slide 是否要提升為 GPU 層wrapper 是否要提升為 GPU 層圖片是否要提升為 GPU 層父子層之間是否沖突這可能導致父層進入 GPU子層未進入閃子層進入 GPU父層未進入閃父子沖突被 Safari 強制回退閃動畫中不同幀使用不同合成策略閃所以 wrapper 越多出現(xiàn)閃爍的概率越高。而當你給 img 加上 translate3d(0,0,0) 時瀏覽器的判斷不再含糊圖片層級被強制提升到頂級 GPU 圖層閃爍自然消失。五、最有效的解決方案推薦做法方案 1直接給圖片提升為 GPU 合成層最穩(wěn).integrated-service-download__swiper-slide img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }優(yōu)點100% 有效不改動 HTML 結構保證所有設備表現(xiàn)一致方案 2只在 active slide 上提升更節(jié)省內存.swiper-slide-active img, .swiper-slide-next img, .swiper-slide-prev img { transform: translateZ(0); will-change: transform; }適用于 slide 數(shù)量多、擔心 GPU 占用過大的情況。方案 3移除無必要的 wrapper移除不必要的結構div classswiper-slide img src... /div減少瀏覽器合成判斷復雜度有時確實能自動避免閃爍但不是通用解需要測試。方案 4動態(tài)添加/移除 will-change在滑動時才啟用this.swiper.on(touchStart, () { document.querySelectorAll(.swiper-slide img) .forEach(img img.style.willChange transform); }); this.swiper.on(transitionEnd, () { document.querySelectorAll(.swiper-slide img) .forEach(img img.style.willChange ); });能減少 GPU 紋理占用。六、為什么不要對太多元素用 will-change因為每個 GPU 合成層都需要顯存texture memory。如果頁面上有幾十張圖都被強制進入合成層會導致Safari 內存不足特別是舊 iPhone查看器自動回退到 CPU反而更卡甚至崩潰因此提升層級要“按需使用”不是越多越好。七、最終總結iOS 上 Swiper 滑動圖片閃爍的本質原因是圖片在動畫過程中不斷經(jīng)歷 CPU 重繪與 GPU 合成的來回切換layer thrashing屬于 Safari 渲染路徑不穩(wěn)定問題。最穩(wěn)定的解決方式是讓需要參與 transform 動畫的圖片進入獨立的 GPU 合成層通過 translate3d(0,0,0)、translateZ(0)、will-change: transform 或適度減少 wrapper 層級即可。如果你的 Swiper 使用 creative effect、大量 translate/scale 效果這幾乎是必做優(yōu)化。八、附最推薦的最終版本穩(wěn)、輕、兼容.integrated-service-download__swiper-slide img { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }簡單、高效、無副作用。