關於一些奇葩的相容bug

iPhoneXr canvas層級失效

大致就是這樣,一個img在canvas上面,所有手機img正常顯示,就是ios的這個機型有問題,系統版本14.0
img的層級不論多大都會被canvas覆蓋
解決辦法盡然是將canvas的層級設定為-1.雖然邏輯上沒有毛病,但是著實讓人費解

display:fixed元素滾動跟隨

如圖大致所示,navbar可以是搜尋框也可以是底部導航欄,滑動page時,navbar跟隨滾動,這個問題是由於佈局時navbar寫在了page元素內,由於佈局上下文的原因,此時的navbar就不只是簡簡單單的相對於視窗了.這個解釋雖然有一定的道理,但是對於Android端來說並不會導致滾動跟隨…這個應該就是ios內部機制問題了
解決辦法:將fixed元素從要滾動的元素內拿出,放在平級以上就行,或者乾脆改用flex佈局

Android單行文字無法上下垂直居中的問題

這個問題我覺得對於強迫症來說確實有問題,但是視覺效果上來說,垂直居中是偏上一點點會讓人覺得上下是居中的(這個出自老外的一本書 css揭祕),不過Android機型普遍特別是文字字號小於14px的時候偏上明顯…這個目前在我看來,單從css來說沒有徹底的解決方法,網上有各種奇技淫巧,其實都治標不治本,最厲害的方式,我看啊,如果真的過不了測試和UED的眼睛,那就只能切圖了.

滑動穿透問題

問題大致就是在一個滑動介面上彈一個遮罩提示,滑動遮罩時底部元素會繼續滾動.
這個問題,一直以來就有,阻止預設事件在這個地方一點用都沒有,除了將底部滾動元素overflow設定為hidden外,我覺得目前沒有更簡單的方法,不過這個方法在PC端會有個問題,那就是頁面會因為突然沒有滾動條而閃動一下.
徹底解決這個問題我覺得得單獨實現一個滾動元件,滾動元件不依賴瀏覽器自帶的滾動條和滾動事件,滾動頁面以transform或者定位來實現滑動的功能,看了一下網易雲音樂的播放列表,貌似就是這麼幹的,簡直厲害.

1px問題

這個…網上很多解決辦法,推薦使用根據裝置的devicePixelRatio動態設定視窗的initial-scale

先碼這麼多吧,還有一些奇葩的問題,都是以ios系統為主的,不知道為什麼原生ios那麼流暢,到了H5端就各種不愉快了…