問題描述：
產(chǎn)生條件：
在360安全瀏覽器/360極速瀏覽器（npapi插件開啟）
CSS3動畫及flash 共存
上述條件同時符合的場景下，在某個flash播放的時候绸罗，觸發(fā)任意一個帶有CSS3動畫的元素，會發(fā)現(xiàn)flash消失旭等，待CSS3動畫播放完畢之后重新出現(xiàn)溉委，如果頁面比較復雜時會發(fā)現(xiàn)其它文本元素也會有閃動現(xiàn)象点待。（此時需要的字體飽和度（hsla中的s）較高奏路，這樣肉眼能夠清晰的看到字體閃動。）
環(huán)境準備：
1臊诊，打開360安全瀏覽器【其它主流瀏覽器非NPAPI】
?2. ?先看下是否use npapi?
? ? ? ?? ? ?方法: ?在地址欄輸入 ?se://plugins ?如圖查看是否開啟
場景帶入：
感謝文章CSS3硬件加速鸽粉，硬件加速的方式，會把需要渲染的元素放到特定的復合層（composited layer）中抓艳，如果你想查看你的頁面是否使用了2D或者3D加速触机，可以用下列方式去查看。
在控制臺可以這樣開啟：【我以360安全瀏覽器為例】
勾選Show composited layer borders以后玷或，就能看到有動畫3d/2d變換的元素會被一個黃色的邊框圈起來威兜，表示放到了一個新的 "復合層（composited layer）" 中渲染，大概長這個樣子：
藍色的細線是瀏覽器渲染時候的瓦片庐椒，瀏覽器繪制頁面的時候只會繪制可視區(qū)域一定范圍內的瓦片椒舵，以節(jié)省性能開銷，而黃色的邊框框起來的约谈，就代表了這個元素被放到特殊的復合層中渲染笔宿，跟主文檔不在一個層中，但其實我只有其中的幾處使用了2D動畫棱诱，但顯然很多并不會涉及的容器也被黃色的邊框框了起來泼橘，經(jīng)過排查發(fā)現(xiàn)，是因為CSS3動畫【這兒要說一下動畫包括 transform 和 animation, 不論是@keyframes 還是簡單的 translate rotate ... 】導致之后所有絕對相對定位的元素都被放到復合層中渲染迈勋。
查了一些?資料：
層創(chuàng)建標準什么情況下能使元素獲得自己的層炬灭？滿足以下任意情況便會創(chuàng)建層：
3D 或透視變換(perspective transform) CSS 屬性
使用加速視頻解碼的 元素
擁有 3D (WebGL) 上下文或加速的 2D 上下文的 元素
混合插件(如 Flash)
對自己的 opacity 做 CSS 動畫或使用一個動畫 webkit 變換的元素
擁有加速 CSS 過濾器的元素
元素有一個包含復合層的后代節(jié)點(換句話說，就是一個元素擁有一個子元素靡菇，該子元素在自己的層里)
元素有一個 z-index 較低且包含一個復合層的兄弟元素(換句話說就是該元素在復合層上面渲染)
最后一條重归，原文是：
Element has a sibling with a lower z-index which has a compositing layer (in other words the it’s rendered on top of a composited layer)
我回過頭看了下我的頁面，非常符合以上的條件厦凤，所以很容易被創(chuàng)建了復合層鼻吮，導致懷疑 CSS3 3D加速的某些屬性影響了頁面中的內容的錯覺 ?直至到后期flash動畫與CSS3動畫同時存在的場景里的時候 才得以解決。
解決方法：
1. 如果不存在flash较鼓，只有CSS3動畫椎木，影響到了頁面其它例如字體抖動的情況下：?
需要給動畫元素加 position:relative和 z-index: 1，這種做法的原理是人為提升動畫元素的z-index博烂，讓瀏覽器知道這個元素的層排序香椎，就不會把其他z-index比它高的元素也弄到復合層中了；
2. 如果flash和CSS3動畫并存禽篱，影響到了頁面其它例如字體抖動的情況或者CSS3動畫影響到了正在播放的flash的時候 ：
需要動畫元素加 position:relative和 z-index: 1畜伐，注意 一定要動畫元素的z-index高于flash的z-index;
注：flash在制作的時候如果加了濾鏡效果，在360安全瀏覽器【npapi】下谆级，會有黑底出現(xiàn)烤礁，極其影響視覺感受讼积。
