之前在自己的個人公衆号中提到了一篇利用 css 的方式進行 xss 攻擊，當時有朋友跟我說，讓我去擷取那個網站的
cookie，再然後進入那個網站的背景去玩。然而，技術能力實在有限，搞不了這些東西，隻是覺得那個網站沒有适當過濾 html
标簽是一件很危險的事情。
不過今天要說的 css 代碼真的是讓 app 崩潰了，至于信不信，看圖就知道咯。
<a></a>
昨晚在被窩中的我突然收到一封郵件，大概内容是說因為 css 的問題讓 app 挂了。當時在想，怎麼樣的 css 如此牛逼，居然讓 app
挂了！于是掏出手機按照郵件中提示的 url 打開看了一下，我隻想說，這代碼，額，算了，還是不吐槽了，其實要是我寫的話，肯定會更爛。
雖然是來自其他部門的一個頁面，但作為公司的一員，怎麼能不為公司的産品考慮呢。聽起來感覺像是在拍馬屁，其實真的是，因為我最好奇的是出現 bug 的原因是什麼，當然，肯定也是關心産品的啦。
于是第二天一早就到公司開始排雷……
首先我仔細看了一下代碼，從最初懷疑是 <code>animation</code> 的性能影響低端裝置運作開始排查。結果發現這個所謂的性能問題其實也并沒那麼厲害，一時也找不到頭緒，然後源檔案又不是在我們自己這邊，隻好打開花瓶抓 css 檔案，然後替換後，用删除法一點點查。
最後在儲大師的提點以及提供的一個 url 來看，居然是 <code>rem</code> 導緻的。
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=364222" target="_blank">https://bugs.chromium.org/p/chromium/issues/detail?id=364222</a>
這個網址大家應該都知道，是專門看 bug 的，當然，也可以提 bug 啦。
剛開始看到這段 css 代碼的時候，我在想啊，這個好像也沒什麼問題啊，不就是通過 <code>:before</code> 這個僞元素來做一個 <code>animation</code>動畫效果麼，然後使用了 <code>rem</code> 這個機關量。
反正是百思不得其解。
還是找測試機，繼續删除那個有問題的頁面代碼吧。先是用了三星的，發現沒問題，接着用了小米的，果然奔潰了。看了一下版本，三星的是 android 4.4.2，小米的是 android 4.4.4，難道是版本的關系？
總之，在最開始那塊有動畫效果的部分排查了很久都沒找到問題。最後還是回到那個已經報了 bug 的頁面上看具體說明。
突然想到，這個頁面中用了 <code>:before</code> 來做動畫，莫非我們的這個頁面中也有，于是一搜，結果，真的有！
趕緊我們自己頁面上的這段代碼拿過來做嘗試，終于找到你了。趕緊回郵件告訴對方……
再次感謝儲大師的提點，讓我有機會了解到未曾了解到的一個問題。
這個 bug 在目前桌面端的裝置中已經被處理掉了，按照 bug list 頁面上說的，當時發現這個 bug 是在
chrome version: 34.0.1847.116 (official build 260972) m
這個版本上的，并且各系統都有。然而，現在的 chrome 都已經是 50 以上的版本了，是以桌面端完全不需要去擔心了。
但是這次既然是在移動端上遇見了，而且是 android 4.4.4 這個版本，雖然是在小米3 中發現，但 android 4.4.4 這個版本應該還算是比較普遍的，難道真的會是這個問題。
擷取一下這個 webview 的 ua 資訊，看到其中有一個是 chrome/33.0.0.0 mobile safari，于是我想啊，可能應該就是這個 webview 的關系了，畢竟我在小米3 這台測試機上的各個浏覽器裡都看了一遍，沒發現問題。
現在是知道 <code>rem</code> 和 <code>animation</code> 一起的時候回出現這個 bug，但是在其他元素中并沒有問題啊。出于自己的好奇心，于是又換了幾個方式來嘗試。
把 <code>animation</code> 換成 <code>transition</code>，并且也是通過改變有 <code>rem</code> 的屬性，結果發現這個想法的結果是，沒有任何問題。
放棄這個想法……
想到 <code>:before</code> 是僞元素，那麼對于僞元素的選擇符還有幾個，都嘗試一下看看。
注：這個截圖是曾經個人整理的有關 css 選擇符的一張圖
結果發現這四個僞元素選擇符全部都會讓頁面崩潰……
浏覽器（webview）的底層渲染機制我不懂，但就目前來看，可能應該就是因為 chrome/33.0.0.0 mobile safari 這個版本的問題，如果在僞元素中使用 <code>animation</code>，并且改變了其中的 <code>rem</code> 的值就會出現頁面崩潰的問題。
是以，可能應該就是這樣：
使用了 <code>:before</code> 等僞元素中的其中一個來做 <code>animation</code> 動畫；
在 <code>animation</code> 動畫改變了其中的某個 <code>rem</code> 的值；
在這樣的前提下，又是使用有這個 bug 的版本浏覽器，那麼就會讓頁面崩潰。
如果要避免這個 bug 的出現，那麼應該是：
換一個 webview，高版本的應該會好一些；
在僞元素中使用 <code>animation</code> 動畫時，不用 <code>rem</code> 機關；
不過好像現在大家都會去用 <code>rem</code> 機關，然後也會去用 <code>animation</code> 做動畫，那這樣好了，不在僞元素上使用者兩樣東西咯。
說到在僞元素上使用動畫，我想起了幾年前自己在做國際網站的時候，當時好像用的比較多的是 firefox，然後在往返程的一個子產品中，就是用了僞元素的方式。
不過當時我好像使用的是 <code>transition</code>，并且當時主要是考慮 firefox，是以也沒遇到什麼問題。印象中遇到的問題就是，好像在某個浏覽器中并沒看到那個 <code>transition</code> 效果，而且這個隻是作為一個小“亮點”的存在，産品經理也沒砍我。想想也算萬幸的……
哦，還有，如果各位已經知道了這個 bug，也請不要嘲笑我，我真的是第一次知道，平時日常中很少這樣去寫樣式。-_”
作者：linxz
來源：51cto