亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

探究 CSS 混合模式濾鏡導(dǎo)致 CSS 3D 失效問題

番茄西紅柿 / 2194人閱讀

摘要：濾鏡也會(huì)導(dǎo)致失效完了嗎沒有。上文中的是什么上文的準(zhǔn)確而言是什么我也無法確定，推測應(yīng)該是，幀緩存對象，存在于顯存中。幀緩存是一些二維數(shù)組和所使用的存儲區(qū)的集合顏色緩存深度緩存模板緩存和累計(jì)緩存。所以，短期內(nèi)可能無望解決。

今天在寫一個(gè)小的 CSS Demo，一個(gè)關(guān)于 3d 球的旋轉(zhuǎn)動(dòng)畫，關(guān)于 CSS 3D，少不了會(huì)使用下面這幾個(gè)屬性：

{
    transform-style: preserve-3d;
    perspective: 1000;
    transform: translate3d();
}

這個(gè) Demo 你可以戳這里，大概是這樣：CodePen Demo - 3D ball:

嗯，大概到了這個(gè)效果，想到了 CSS 混合模式 mix-blend-mode，尋思著，利用混合模式，是否能讓效果更上一層樓或者碰撞出一些其他火花。

mix-blend-mode：我們通常稱之為混合模式，利用混合模式將多個(gè)圖層混合可以得到一個(gè)新的效果，mix-blend-mode 描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合。

關(guān)于混合模式的一些使用可以看這里：不可思議的混合模式 background-blend-mode (二)、不可思議的混合模式 background-blend-mode

 

CSS 3D 配合 mix-blend-mode

然而，給元素加上了一個(gè)混合模式之后，神奇的事情發(fā)生了，3D 效果消失了。

也就是在每個(gè)光點(diǎn)的 CSS 元素代碼中添加這樣一句：

{
    mix-blend-mode: lighten;
}

效果從 CSS 3D 變成了 2D。

這就很蹊蹺了，預(yù)想中的混合并沒有發(fā)生，取而代之的是 3D 的失效。我想，也許與內(nèi)核有關(guān)，上面的效果是在 chrome 65.0.3325.181 試驗(yàn)得到的。

 

是否與瀏覽器內(nèi)核有關(guān)？

帶著這樣的疑問，我又測試了下其他幾個(gè)內(nèi)核：

  • firefox 64.0 -- 這次更加詭異，整個(gè)圖案都不會(huì)再被渲染出來
  • Safari 12.0.2 -- 渲染正常

Safari 是可以正常展示的，只能初略的認(rèn)為，應(yīng)該是與內(nèi)核有關(guān)系的。那應(yīng)該也有很多人遇到過同樣的問題，帶著這個(gè)疑惑，google 一下。

爆棧網(wǎng)也有同學(xué)提出類似的疑惑：StackOverflow -- mix-blend-mode is broken by 3D transformations on page

隨后，在 chromium bug 提交網(wǎng)站上，找到了 15 年的一個(gè) bug 單，也是對這個(gè)問題的疑問：

BUG -CSS mix-blend-mode turns off CSS perspective.

最終在 bug 單的最下面找到了可能靠譜的回答：

When we have mix-blend-mode, the closest ancestor that creates stacking context will isolate blending. We create a render surface at the root of this isolated group and because render surfaces dont support preserve-3d(because they render into separate FBO), we see a flattened result.

ajuma@ suggested that this bug maybe much easier to fix after Slimming paint v2 if we can somehow disentangle transforms from layers.

翻譯一下，意思大概是：當(dāng)我們使用 CSS 混合模式的時(shí)候，堆疊上下文會(huì)重新對這個(gè)使用了混合模式的元素的根節(jié)點(diǎn)處創(chuàng)建一個(gè)獨(dú)立的渲染平面，但是很可惜，這個(gè)渲染平面是不支持 preserve-3d 的(因?yàn)樗鼈冧秩镜蕉鄮У腇BO中)，所以我們看到是一個(gè) 2D 的平面效果。

 

驗(yàn)證 Layer borders

上面的那句話應(yīng)該已經(jīng)可以作為結(jié)論，我再使用 chrome 提供的工具驗(yàn)證一下，打開開發(fā)者工具的 Rendering -> Layer borders：

黃色代表 CSS 渲染時(shí)候的 GraphicsLayer 層， 藍(lán)色網(wǎng)格表示瓦片(tile)，你可以把它們當(dāng)作是層的單元（并不是層），Chrome 內(nèi)核可以將它們作為一個(gè)大層的部分上傳給 GPU 進(jìn)行渲染加速。

  • 正常 3D 模式下，開啟 Layer borders 效果：

  • 添加了 mix-blend-mode 的 3D 模式下，開啟 Layer borders 效果：

可以看到，在 mix-blend-mode 的 3D 模式下，確實(shí)在整個(gè)球形元素之外，又多了一層藍(lán)色 tile。也就是上文提到的獨(dú)立的渲染平面，也就是因?yàn)檫@個(gè)渲染平面不支持 preserve-3d 的原因，我們最終得到了一個(gè) 2D 平面圖形。

 

濾鏡也會(huì)導(dǎo)致 CSS 3D 失效

完了嗎？沒有。不是吧，這誰頂?shù)米“　?/span>

那么如果是因?yàn)?nbsp;mix-blend-mode 多生成了一個(gè)獨(dú)立渲染平面導(dǎo)致的 3D 失效，那么是否有其他元素也會(huì)導(dǎo)致同樣的結(jié)果呢？

帶著疑惑，去掉了 mix-blend-mode，我又給設(shè)置了 3d 的元素添加了一個(gè)濾鏡：

{
-    mix-blend-mode: lighten;
+    filter: blur(1px);
}

果然，出現(xiàn)了同樣的問題，3D 失效：

 

總結(jié)一下

嗯。那么應(yīng)該可以初步得到一個(gè)結(jié)論就是所有這些在渲染時(shí)候需要再獨(dú)立生成一個(gè)渲染平面，且包含了 preserve-3d 的屬性，都會(huì)導(dǎo)致內(nèi)部的 CSS 3D 失效。

暫時(shí)我發(fā)現(xiàn)的有下述幾個(gè)屬性，都會(huì)導(dǎo)致 CSS 3D 失效：

  • mix-blend-mode
  • background-blend-mode
  • filter

 

其他問題

這個(gè) bug 有什么影響

額，通常來說，很少會(huì)有人在使用 CSS 3D 的同時(shí)使用混合模式或者濾鏡，這兩個(gè)屬性更多的錦上添花的作用，所以大部分時(shí)候，不使用它們就不會(huì)有問題， 所以影響不是很大。

上文中的 FBO 是什么？

上文的 FBO 準(zhǔn)確而言是什么我也無法 100% 確定，推測應(yīng)該是 Frame Buffer Object，幀緩存對象，存在于顯存中。幀緩存是一些二維數(shù)組和 OpenGL 所使用的存儲區(qū)的集合：顏色緩存、深度緩存、模板緩存和累計(jì)緩存。

各種三維場景現(xiàn)在渲染到屏幕上都是先放到一個(gè) FBO 中，可以理解為一張離屛圖片，用于加速渲染。

Bug 何時(shí)會(huì)被修復(fù)

在 chromium bugs 網(wǎng)站，上述 bug 被合并到 issue 575099，并且最終狀態(tài)是 Untriaged，表示尚未分配優(yōu)先級，意思是等待某人確定哪個(gè)人應(yīng)該認(rèn)領(lǐng)并修復(fù)該特定錯(cuò)誤。所以，短期內(nèi)可能無望解決。

 

最后

感謝耐心讀完。更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

好了，本文到此結(jié)束，希望對你有幫助 :)

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

 

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1430.html

相關(guān)文章

  • 探究 CSS 混合模式濾鏡導(dǎo)致 CSS 3D 失效問題

    摘要：濾鏡也會(huì)導(dǎo)致失效完了嗎沒有。上文中的是什么上文的準(zhǔn)確而言是什么我也無法確定，推測應(yīng)該是，幀緩存對象，存在于顯存中。幀緩存是一些二維數(shù)組和所使用的存儲區(qū)的集合顏色緩存深度緩存模板緩存和累計(jì)緩存。 今天在寫一個(gè)小的 CSS Demo，一個(gè)關(guān)于 3d 球的旋轉(zhuǎn)動(dòng)畫，關(guān)于 CSS 3D，少不了會(huì)使用下面這幾個(gè)屬性： { transform-style: preserve-3d; ...

    Betta 評論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    dailybird 評論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    hellowoody 評論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來我的個(gè)人站點(diǎn)性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動(dòng)及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個(gè)優(yōu)化步驟進(jìn)階鵝廠大神用直出實(shí)現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補(bǔ)課緩存機(jī)制優(yōu)化動(dòng) 歡迎來我的個(gè)人站點(diǎn) 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動(dòng) scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    wwolf 評論0 收藏0

  • CSS 火焰？不在話下

    摘要：下圖是我鼓搗到另外一個(gè)小，當(dāng)?shù)皆氐臅r(shí)候，產(chǎn)生火焰效果嗯，這些其實(shí)都是對濾鏡及混合模式的一些搭配運(yùn)用。主要幾個(gè)屬性默認(rèn)大家已經(jīng)掌握了大概，閱讀后可以自行去了解補(bǔ)充更多細(xì)節(jié)更多精彩技術(shù)文章匯總在我的，持續(xù)更新，歡迎點(diǎn)個(gè)訂閱收藏。正文從下面開始。 今天的小技巧是使用純 CSS 生成火焰，逼真一點(diǎn)的火焰。 嗯，長什么樣子？在 CodePen 上輸入關(guān)鍵字?CSS Fire，能找到這樣的： 或者...

    Cciradih 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<