資訊專欄INFORMATION COLUMN
摘要：因為組件需要全屏展示，所以我設置了如下的同時，對原本的，我給它加上，避免彈出虛擬鍵盤。獲取輸入焦點之后，雖然沒有彈出虛擬鍵盤，但仍然是待輸入狀態(tài)。
首發(fā)我的博客，兩邊同步更新。
先說需求。東家讓我做個日歷組件，在手機 Web 上用。組件的樣式是這樣的，很多地方都可以見到，比如南航國航的客戶端。
看起來并不復雜，事實上也是，基本上順順利利的開發(fā)完成，準備交付。這里有個伏筆，開發(fā)中我按老習慣，使用桌面 Chrome，和實際生產環(huán)境不太一樣。不過我自然要去真機上測試，結果一測問題就出來了。
因為組件需要全屏展示，所以我設置了如下的CSS：
.date-picker {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: white;
z-index:1024;
}
同時，對原本的 ，我給它加上 readonly，避免彈出虛擬鍵盤。理論上，這樣的就可以了。但實測時，不滾屏的時候，組件彈出時尺寸是準確的，蓋滿全屏；然則一旦滾屏，組件就會占據從頁面最上方到當前最下面這截位置。大約相當于 position:absolte;top:0 的效果。
如圖，可以看到組件占據了全屏，但實際是從頁面最上面開始的，定位有問題。用桌面 Safari 調試也可以看出來它的高度是 968，遠大于正常的 667。
這很詭異，上下左右全為0，是上古巨獸 IE6 都支持的做法。iOS Safari 雖然 Bug 多多，不應該連這個都有毛病啊。以 ios safari position fixed 為關鍵詞 Google 之，結果 iOS Safari 歷史不清白，當年 iPhone 剛出的時候的確有定位問題，于是雖有滿屏的結果，但都不適用。
然后我想到找其它庫，比如 Bootstrap，它的 Modal 組件也是類似的效果。但是怎么測都正常，于是我只好一個樣式一個樣式修改，仍然沒有結果。
時間慢慢流逝，轉眼已經凌晨2點了，就在我?guī)子艞壷H，突然發(fā)現(xiàn)，雖然組件彈出的時候定位有問題，但只要我點掉下面的完成，定位就會立刻恢復正常。
注意，就是那個“完成”。
問題至此已經明朗：在 iOS Safari 里，即使 設置了 readonly，它仍然可以獲取輸入焦點。獲取輸入焦點之后，雖然沒有彈出虛擬鍵盤，但仍然是待輸入狀態(tài)。
此時頁面各種交互都是正常工作的，比如點擊、滾屏。唯獨 position:fixed 定位有問題。點擊“完成”離開輸入狀態(tài)，Safari 自動刷新頁面元素，定位就正常了。
于是我在組件彈出后，自動 input.blur()，使其失去焦點，組件的尺寸便正常無誤了。
總結移動端 Web 開發(fā)總有各種各樣稀奇古怪的問題。有些好解決，有些不好解決，比如這個問題，很難定位：
歷史不清白，搜也搜不到
組件要求全屏，需要避免虛擬鍵盤，所以會改變默認行為
其它情況下都是好的
我能想到的方案，就是想辦法，用所有能用的工具，排除掉所有其它問題，最終還是能搞出來的。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/116527.html
摘要：二分析排查一步驟一使用搜索引擎我是在無意中發(fā)現(xiàn)該問題的，當時觀察到的現(xiàn)象是綁定在上的事件有時會被觸發(fā)，有時會失效。這說明并不存在偶爾失效的問題。也就是說，我需要找到確切的令響應事件失效的原因。接下來的事很簡單，繼續(xù)搜索事件在頁面滾動后失效。 如果你關注我應該知道，我最近對PC端頁面進行移動適配。在這個過程中，為了節(jié)省用戶300ms的時間，同時給予用戶更及時的點擊反饋（這意味著更好的用戶...
摘要：二分析排查一步驟一使用搜索引擎我是在無意中發(fā)現(xiàn)該問題的，當時觀察到的現(xiàn)象是綁定在上的事件有時會被觸發(fā)，有時會失效。這說明并不存在偶爾失效的問題。也就是說，我需要找到確切的令響應事件失效的原因。接下來的事很簡單，繼續(xù)搜索事件在頁面滾動后失效。 如果你關注我應該知道，我最近對PC端頁面進行移動適配。在這個過程中，為了節(jié)省用戶300ms的時間，同時給予用戶更及時的點擊反饋（這意味著更好的用戶...
摘要：瀏覽器后，被軟鍵盤遮蓋的問題，已經有好多人問相關的問題，應該是問的角度不一樣，還的再次提出咯。如上循環(huán)，問題無法解決。 safari瀏覽器fixed后，被軟鍵盤遮蓋的問題，已經有好多人問相關的問題，應該是問的角度不一樣，還的再次提出咯。 問題描述 測試環(huán)境：ios 10.2/10.3 簡單來說就是在html5頁面中底部有個fixed的區(qū)域，如圖 showImg(https://segm...
閱讀 2592·2021-09-22 15:15
閱讀 724·2021-09-02 15:11
閱讀 1907·2021-08-30 09:48
閱讀 1964·2019-08-30 15:56
閱讀 1604·2019-08-30 15:52
閱讀 2146·2019-08-30 15:44
閱讀 506·2019-08-29 16:29
閱讀 1605·2019-08-29 11:06
