問題描述
iOS webview 中會有雙擊居中功能碗脊，自動將不在屏幕中心的文本拉到屏幕中心屡久。但是這個(gè)時(shí)候彈出的元素會錯(cuò)位。
我們使用 position: fixed; 對彈出元素進(jìn)行定位钧舌，并且給予屏幕大小一樣對寬高禁熏。
1.png
上圖是正常情況。
然后我們滾動到某個(gè)位置媳搪，再次彈窗也不會有問題铭段。
此時(shí)雙擊下面的某個(gè)元素，然后再點(diǎn)擊按鈕出彈窗秦爆。這是我們看到的背景色已經(jīng)錯(cuò)位了序愚。
2.png
點(diǎn)我在 APP webview 中試試有沒有這個(gè) bug
貼上這部分的代碼
var show = document.querySelector('.js-show');
show.addEventListener('click', function() {
var modal = document.createElement('div');
modal.classList.add('modal');
document.body.appendChild(modal);
modal.addEventListener('click', function() {
document.body.removeChild(modal);
});
});
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
解決方案
在彈窗前先對瀏覽器進(jìn)行一次滾動。
在 js 中添加下面的代碼
window.scrollTo(window.scrollX, window.scrollY);
