搜尋
首頁web前端css教學CSS會讓app崩潰

CSS會讓app崩潰

Jan 23, 2017 pm 03:11 PM

今天要說的 CSS 程式碼真的是讓 app 崩潰了,至於信不信,看圖片就知道咯。

CSS會讓app崩潰

突然收到一封郵件,大概內容是說因為 CSS 的問題讓 app 掛了。當時在想,怎麼樣的 CSS 如此屌,居然讓 app 掛了!於是掏出手機按照郵件中提示的 URL 打開看了一下,我只想說,這代碼,額,算了,還是不吐槽了,其實要是我寫的話,肯定會更爛。

雖然是來自其他部門的一個頁面,但作為公司的一員,怎麼能不為公司的產品考慮呢。聽起來感覺像是在拍馬屁,其實真的是,因為我最好奇的是出現 bug 的原因是什麼,當然,肯定也是關心產品的啦。

於是第二天一早就到公司開始排雷…

仔細看了一下程式碼,從最初懷疑是 animation 的性能影響低端設備運行開始排查。結果發現這個所謂的效能問題其實也沒那麼厲害,一時也找不到頭緒,然後源文件又不是在我們自己這邊,只好打開花瓶抓 CSS 文件,然後替換後,用刪除法一點點查。

最後在儲大師的提點以及提供的一個 URL 來看,居然是 rem 導致的。

這個網址大家應該都知道,是專門看 bug 的,當然,也可以提 bug 啦。

@-webkit-keyframes crashChrome { 
        0%{ -webkit-transform: translateX(0rem);} 
} 
.anim:before{ 
    content: ""; 
    width: 3rem; 
    height: 3rem;     
    border-radius: 3rem;     
    position: absolute;     
    left:5rem;     
    top: 5rem;         
    background-color: #06839f;         
    -webkit-animation: crashChrome; 
}
<div class="anim"></div>

剛開始看到這段 CSS 程式碼的時候,感覺這個好像也沒什麼問題啊,不就是透過 :before 這個偽元素來做一個 animation 動畫效果麼,然後使用了 rem 這個單位量。

反正是百思不得其解。

還是找測試機,繼續刪除那個有問題的頁面程式碼吧。先是用了三星的,發現沒問題,接著用了小米的,果然奔潰了。看了一下版本,三星的是 Android 4.4.2,小米的是 Android 4.4.4,難道是版本的關係?

總之,在最開始那塊有動畫效果的部分排查了很久都沒找到問題。最後還是回到那個已經報了 bug 的頁面上看具體說明。

突然想到,這個頁面中用了 :before 來做動畫,莫非我們的這個頁面中也有,於是一搜,結果, 真的有 !

趕緊我們自己頁面上的這段程式碼拿過來做嘗試,終於找到你了。趕緊回郵件告訴對方…

再次感謝儲大師的提點,有機會了解未曾了解到的一個問題。

這個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 這個版本應該還算是比較普遍的,難道真的會是這個問題。

CSS會讓app崩潰

獲取一下這個webview 的UA 信息,看到其中有一個是 Chrome/33.0.0.0 Mobile Safari ,於是我想啊,可能應該就是這個webview 的關係了,畢竟我在小米3 這台測試機上的各個瀏覽器都看了一遍,沒發現問題。

現在是知道 rem 和 animation 一起的時候回出現這個 bug,但是在其他元素中並沒有問題。

然後開始做各種實驗:

把 animation 換成 transition ,並且也是透過改變有 rem 的屬性,結果發現這個想法的結果是,沒有任何問題。

想到 :before 是偽元素,那麼對於偽元素的選擇符還有幾個,都試試看。

CSS會讓app崩潰

結果發現這四個偽元素選擇符全部都會讓頁面崩潰…

瀏覽器(webview)的底層渲染機制我不懂,但就目前來看,可能應該就是因為 Chrome/33.0. 0.0 Mobile Safari 這個版本的問題,如果在偽元素中使用animation ,並且改變了其中的rem 的值就會出現頁面崩潰的問題。

所以,可能應該就是這樣:

使用了:before 等偽元素中的其中一個來做animation 動畫;

在animation 動畫改變了其中的某個rem 的值;

在這樣的前提下,又是使用有這個bug 的版本瀏覽器,那就會讓頁面崩潰。

如果要避免這個 bug 的出現,那麼應該是:

換一個 webview,高版本的應該會好一些;

在偽元素中使用 animation 動畫時,不用 rem 單位;

在偽元素中使用 animation 動畫時,不用 rem 單位;🎜

不過好像現在大家都會去用 rem 單位,然後也會去用 animation 做動畫,那這樣好了,不在偽元素上使用者兩樣東西咯。


陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
'訂閱播客”鏈接應在哪裡?'訂閱播客”鏈接應在哪裡?Apr 16, 2025 pm 12:04 PM

有一段時間,iTunes是播客中的大狗,因此,如果您將“訂閱播客”鏈接到喜歡:

瀏覽器引擎多樣性瀏覽器引擎多樣性Apr 16, 2025 pm 12:02 PM

當他們在2013年去Chrome時,我們失去了歌劇。與Edge今年早些時候也進行了同樣的交易。邁克·泰勒(Mike Taylor)稱這些變化為“減少

網絡共享的UX注意事項網絡共享的UX注意事項Apr 16, 2025 am 11:59 AM

從垃圾點擊誘餌網站到大多數出版物的最多,共享按鈕長期以來一直無處不在。然而,這些

每周平台新聞:Apple部署網絡組件,漸進的HTML渲染,自託管關鍵資源每周平台新聞:Apple部署網絡組件,漸進的HTML渲染,自託管關鍵資源Apr 16, 2025 am 11:55 AM

在本週的綜述中,Apple進入Web組件,Instagram如何插入腳本以及一些思考的食物,以進行自託管關鍵資源。

git Pathspecs以及如何使用它們git Pathspecs以及如何使用它們Apr 16, 2025 am 11:53 AM

當我查看GIT命令的文檔時,我注意到其中許多人都有選擇。我最初以為這只是一個

產品圖像的彩色拾取器產品圖像的彩色拾取器Apr 16, 2025 am 11:49 AM

聽起來有點像一個困難的問題,不是嗎?我們經常沒有成千上萬種顏色的產品鏡頭,以便我們可以隨身攜帶。我們也不是

黑暗模式與React和Themeprovider切換黑暗模式與React和Themeprovider切換Apr 16, 2025 am 11:46 AM

我喜歡網站具有“暗模式”選項時。黑暗模式使我更容易閱讀網頁,並幫助我的眼睛更放鬆。許多網站,包括

帶有HTML對話框元素的一些動手帶有HTML對話框元素的一些動手Apr 16, 2025 am 11:33 AM

這是我第一次查看HTML元素。我已經意識到了一段時間,但是尚未將其旋轉。它很酷,

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境