作者：京東物流 陳雨

作為一名開(kāi)發(fā)者，bug 往往是我們最怕遇見(jiàn)的東西；而比遇到 bug 更可怕的事情，是定位不到 bug。作為一名前端開(kāi)發(fā)者，與業(yè)務(wù)邏輯相關(guān)的 bug 還相對(duì)好定位、好解決一些；而一些與語(yǔ)法特性、平臺(tái)與設(shè)備差異相關(guān)的 bug 則更令人頭疼一些。這里記錄下我在工作中遇到過(guò)的稀奇古怪的前端問(wèn)題，作為給自己的記錄和提醒。

用 vh 定義全屏顯示的問(wèn)題

很多頁(yè)面因?yàn)樵O(shè)計(jì)效果的需要，要求正好鋪滿一整個(gè)顯示界面、也不允許上下滑動(dòng)。做類似的需求時(shí)，往往直覺(jué)會(huì)使用這樣的代碼解決問(wèn)題：

{
 height: 100vh;
}

這樣的代碼看似很優(yōu)雅，但是往往會(huì)有兼容性問(wèn)題——不同瀏覽器定義的視口高度的定義不一致，導(dǎo)致 100vh 并不能真正覆蓋全視口高度；還有不少瀏覽器視口高度數(shù)值不變但實(shí)際視口大小可變，比如移動(dòng)端 Chrome 瀏覽器的導(dǎo)航欄時(shí)不時(shí)隱藏但網(wǎng)頁(yè)獲取的視口高度不變，這都會(huì)導(dǎo)致最終顯示效果不符合預(yù)期。

如果要實(shí)現(xiàn)全屏幕覆蓋不可滑動(dòng)，更為穩(wěn)妥和保險(xiǎn)的方法是使用絕對(duì)定位：

{
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}

帶 alpha 通道的 hex 顏色值失效的問(wèn)題

在較新的 web 標(biāo)準(zhǔn)中，hex 格式的顏色代碼也可以表示透明度了，只需要在常見(jiàn)的六位 hex 顏色代碼后加兩位表示透明度的 hex 值，例如 #66ccff 表示一種藍(lán)色，而 #66ccff80 表示透明度 50% 的這種藍(lán)色（80 是 16 進(jìn)制的 128，是 256 的一半，即 50% 透明度）。雖然直接這樣寫(xiě)代碼的行為在前端開(kāi)發(fā)中不普遍，但是設(shè)計(jì)師交付的視覺(jué)稿給出的參考值有不少是這種格式。如果直接把這樣的顏色代碼用于生產(chǎn)中，可能會(huì)出現(xiàn)以下兩種問(wèn)題：

?如果你編寫(xiě)的項(xiàng)目引入了 less 或者 sass，在進(jìn)行打包構(gòu)建的操作時(shí)，部分預(yù)處理器無(wú)法正確識(shí)別帶 alpha 通道的 hex 顏色值，因此這部分代碼無(wú)法被正確轉(zhuǎn)譯，最終構(gòu)建出的生產(chǎn)環(huán)境代碼中這部分顏色可能丟失。

?部分移動(dòng)端瀏覽器并未適配帶 alpha 通道的 hex 顏色值，因此即使是使用原生 css 完成的代碼，也有可能出現(xiàn)在部分手機(jī)或部分瀏覽器顏色不正常的問(wèn)題。

生命周期函數(shù)不執(zhí)行的問(wèn)題

在頁(yè)面剛打開(kāi)或準(zhǔn)備關(guān)閉時(shí)，我們往往需要進(jìn)行一些諸如數(shù)據(jù)初始化、登入登出、數(shù)據(jù)上報(bào)等行為，而這些往往是借助 Vue 或 React 的生命周期函數(shù)完成的。不過(guò)，生命周期函數(shù)不執(zhí)行也是常被忽略的 bug，詳細(xì)來(lái)說(shuō)，又可以分為兩類原因——

組件被 keep alive 導(dǎo)致未被卸載或重新加載

如果是 Vue 中使用 keep-alive 包裹的組件，或在 React 中使用類似的第三方庫(kù) keep alive 的組件，只會(huì)在第一次加載時(shí)執(zhí)行生命周期初始化函數(shù)，且不會(huì)執(zhí)行生命周期卸載函數(shù)。這導(dǎo)致的不符合預(yù)期的行為很好解決，只需要使用 onActivated 代替 onMounted ，用 onDeactivated 代替 onUnmounted 即可。

頁(yè)面被直接關(guān)閉導(dǎo)致框架生命周期函數(shù)無(wú)法執(zhí)行

不管是 Vue 還是 React，生命周期函數(shù)的正確執(zhí)行都依賴于 Vue 或 React 實(shí)例的存在。而當(dāng)用戶直接關(guān)閉瀏覽器頁(yè)面的時(shí)候，Vue 或 React 實(shí)例已經(jīng)被銷毀了，生命周期卸載函數(shù)當(dāng)然就無(wú)法執(zhí)行了。處理這種情況也并不麻煩，只需要在生命周期初始化函數(shù)中添加對(duì) window 卸載事件的監(jiān)聽(tīng)，然后把想要進(jìn)行的操作放到 window 卸載事件函數(shù)里就好了。

onMonted(() => {  
  window.addEventListener('beforeunload', () => {    
    // 需要執(zhí)行的代碼 
  });
});

文本中的 emoji 上下被裁剪

UGC 內(nèi)容中經(jīng)常出現(xiàn)文本和 emoji 混排的場(chǎng)景，而有時(shí)可能遇到 emoji 上下邊緣被裁剪的問(wèn)題。這往往是由于開(kāi)發(fā)頁(yè)面時(shí)為了限定文本高度和間距或其他排版方面的要求，將 line-height 和 font-size 設(shè)置為同樣的值，且 overflow 屬性被設(shè)置為 hidden 。如果出現(xiàn)類似情況，建議去除 line-height 的限制，而通過(guò) margin 等方式控制行距，從而避免 emoji 被裁減。

輸入框被彈起的軟鍵盤(pán)覆蓋的問(wèn)題

如果移動(dòng)端頁(yè)面中有輸入框，那么很可能面臨輸入框被彈起的軟鍵盤(pán)覆蓋的問(wèn)題。一般來(lái)講，對(duì)于需要彈起軟鍵盤(pán)的場(chǎng)景，較新的瀏覽器或者移動(dòng)端 app 的 webview 會(huì)自動(dòng)聚焦到輸入框中并滾動(dòng)到相應(yīng)位置，來(lái)保證輸入框的正常顯示；但是，對(duì)于如下兩種情況，彈起的軟鍵盤(pán)會(huì)將輸入框覆蓋，影響用戶輸入。

瀏覽器未能主動(dòng)聚焦到輸入框

軟鍵盤(pán)彈起時(shí)，一般會(huì)從底部將頁(yè)面頂起、壓縮視口；視口高度變低了，原先處于顯示區(qū)域的輸入框可能就被擠到輸入框外了。如果用戶使用的瀏覽器版本較早或 app 內(nèi)置 webview 較為特殊，有可能在軟鍵盤(pán)彈出后瀏覽器未能主動(dòng)聚焦到輸入框上。這時(shí)，開(kāi)發(fā)者必須主動(dòng)聚焦到輸入框并使輸入框滾動(dòng)到視口內(nèi)。

const inputEle = document.querySelector('#target-input');inputEle.focus();inputEle.scrollIntoView();

軟鍵盤(pán)采用覆蓋在視口上層而非壓縮視口的方式彈出

如果瀏覽器或 webview 版本較為特殊，且輸入框處于頁(yè)面靠下的位置或者針對(duì)視口絕對(duì)定位于底部，那么可能會(huì)面臨更加復(fù)雜的情況。剛才已經(jīng)提到，正常情況下，軟鍵盤(pán)彈起的標(biāo)準(zhǔn)做法是從底部將頁(yè)面頂起、壓縮視口高度；但是某些情況下，軟鍵盤(pán)并不改變視口尺寸，而是直接蓋在視口上方。這就導(dǎo)致頁(yè)面邏輯上是展示完整的、輸入框也正常顯示在視口中；但軟鍵盤(pán)遮擋了半個(gè)頁(yè)面，也就真正意義上“覆蓋”在輸入框上。目前主流移動(dòng)端瀏覽器較新的版本都不會(huì)出現(xiàn)這個(gè)問(wèn)題，但是部分 app 內(nèi)置 webview 會(huì)設(shè)置為“軟鍵盤(pán)覆蓋在 webview 上方”；因此要解決這個(gè)問(wèn)題，必須由客戶端更改 webview 的軟鍵盤(pán)設(shè)置。如果是很舊的瀏覽器版本或者無(wú)法推動(dòng)客戶端開(kāi)發(fā)解決問(wèn)題，那就只能放棄治療了。