關於一些奇葩的兼容bug
iPhoneXr canvas層級失效
大體就是這樣,一個img在canvas上面,全部手機img正常顯示,就是ios的這個機型有問題,系統版本14.0
img的層級不論多大都會被canvas覆蓋
解決辦法盡然是將canvas的層級設置爲-1.雖然邏輯上沒有毛病,可是着實讓人費解css
display:fixed元素滾動跟隨
如圖大體所示,navbar能夠是搜索框也能夠是底部導航欄,滑動page時,navbar跟隨滾動,這個問題是因爲佈局時navbar寫在了page元素內,因爲佈局上下文的緣由,此時的navbar就不僅是簡簡單單的相對於視窗了.這個解釋雖然有必定的道理,可是對於Android端來講並不會致使滾動跟隨…這個應該就是ios內部機制問題了
解決辦法:將fixed元素從要滾動的元素內拿出,放在平級以上就行,或者乾脆改用flex佈局ios
Android單行文字沒法上下垂直居中的問題
這個問題我以爲對於強迫症來講確實有問題,可是視覺效果上來講,垂直居中是偏上一點點會讓人以爲上下是居中的(這個出自老外的一本書 css揭祕),不過Android機型廣泛特別是文字字號小於14px的時候偏上明顯…這個目前在我看來,單從css來講沒有完全的解決方法,網上有各類奇技淫巧,其實都治標不治本,最厲害的方式,我看啊,若是真的過不了測試和UED的眼睛,那就只能切圖了.web
滑動穿透問題
問題大體就是在一個滑動界面上彈一個遮罩提示,滑動遮罩時底部元素會繼續滾動.
這個問題,一直以來就有,阻止默認事件在這個地方一點用都沒有,除了將底部滾動元素overflow設置爲hidden外,我以爲目前沒有更簡單的方法,不過這個方法在PC端會有個問題,那就是頁面會由於忽然沒有滾動條而閃動一下.
完全解決這個問題我以爲得單獨實現一個滾動組件,滾動組件不依賴瀏覽器自帶的滾動條和滾動事件,滾動頁面以transform或者定位來實現滑動的功能,看了一下網易雲音樂的播放列表,貌似就是這麼幹的,簡直厲害.canvas
1px問題
這個…網上不少解決辦法,推薦使用根據設備的devicePixelRatio動態設置視窗的initial-scale瀏覽器
先碼這麼多吧,還有一些奇葩的問題,都是以ios系統爲主的,不知道爲何原生ios那麼流暢,到了H5端就各類不愉快了…svg