英文:
iOS Safari overriding 100vh on input focus: Injecting empty space below the DOM
问题
当在iOS Safari上选择输入字段时，在HTML标签的外部注入了约≈150px的空间。
在上面的屏幕截图中，绿色边框已应用于HTML元素，黑色的可滚动区域只有在iOS Safari中聚焦输入字段时才可访问。尽管HTML元素保留了其100vh/svh属性。
您可以看到当我在控制台中悬停在元素上时，<HTML>标记会变成蓝色...我已经这样做是为了帮助显示空白空间与网页本身无关。
期望的功能是键盘不会在键盘下方注入此间距...这对iOS上的其他浏览器也是如此。
我已经花了一些时间尝试不同的高度值（在我的情况下，SVH是首选）和溢出样式设置，使用JS和CSS，但由于网页添加的空间似乎独立于DOM并且无法通过控制台访问，因此这些尝试都没有产生影响。
具体来说，我已经尝试计算页面加载时的实际视口高度，然后在页面的整个生命周期内使用这个固定值 - 通过将这个固定值应用于body/html元素，以确保在显示键盘时不会添加额外的空间。
CSS
body {
--vh: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
overflow: auto;
}
JS
useEffect(() => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
return () => {
window.removeEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
};
}, []);
但由于注入的空间似乎不是DOM的一部分 - 更新<HTML>或<body>标签的高度实际上无法解决此问题。
有人找到了解决方案吗？
英文:
When an input field is selected on iOS Safari, about ≈150px is injected, outside of the DOM, below the HTML tag
In the screenshot above the green border has been applied to the HTML element - and the black scrollable area beneath is only accessible on iOS safari when an input field has been focused. While the HTML element retains its 100vh/svh attribute
You can see the <HTML> tag turn blue when I hover over the element in the console... I've done this to help show that the empty space is not related to the webpage itself
The expected functionality is for the keyboard not to inject this spacing below the keyboard… as is the case for other browsers on iOS
I've spent some time messing around with different height values (SVH is preferred in my instance) and overflow style settings, using JS and CSS, but none of that has an impact because the space added to the webpage appears to be independent of the DOM and inaccessible via the console
Specifically, I've experimented with calculating the actual viewport height when the page loads, and then using this fixed value throughout the lifetime of the page - by applying this fixed value to the body/html element to ensure that no extra space is added at the bottom when the keyboard is displayed
CSS
body {
--vh: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
overflow: auto;
}
JS
useEffect(() => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
return () => {
window.removeEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
};
}, []);
But since the space injected does not appear to be a part of the DOM - updating the height of the <HTML> or <body> tags does not actually resolve the issue.
Has anyone found a solution for this?
答案1
得分: 2
我用开发工具尝试修复了你的CSS。
我成功地通过添加 box-sizing: border-box; 来修复它。
希望这有所帮助。
英文:
I tried fixing your css with the DevTools.
I managed to fix it via adding box-sizing: border-box;
I hope this helps.
答案2
得分: 1
第一个解决方案是更新您的HTML标签样式，使用以下代码：
html {
border: 5px solid green;
max-height: 100svh;
max-width: 100vw;
height: 100vh;
width: 100vw;
overflow: hidden;
box-sizing: border-box; //添加此行
}
第二个解决方案是将高度设置为100vh - 10px，宽度设置为100vw - 10px，因为边框占用了宽度和高度的（5 + 5）像素，所以需要从宽度和高度中减去它：
html {
border: 5px solid green;
max-height: 100svh;
max-width: 100vw;
height: calc(100vh - 10px); //从高度减去10px（上下边框共5px + 5px）
width: calc(100vw - 10px); //从宽度减去10px（左右边框共5px + 5px）
overflow: hidden;
}
还要给textarea字段添加CSS属性：
textarea {
width: 100%;
max-width: 100%;
resize: none; //它将禁用通过textarea右下角调整大小的选项
}
试试这样做，让我知道是否有效。谢谢。
英文:
The first solution is update your html tag style with following code
html {
border: 5px solid green;
max-height: 100svh;
max-width: 100vw;
height: 100vh;
width: 100vw;
overflow: hidden;
box-sizing: border-box; //Add this
}
and the second solution is give height 100vh - 10px and width 100vw - 10px because border is taking (5 + 5) pixels in width and height so reduce it from width and height use
html {
border: 5px solid green;
max-height: 100svh;
max-width: 100vw;
height: calc(100vh - 10px); //reduce 10px from height (5px + 5px) border of top and bottom
width: calc(100vw - 10px); //reduce 10px from width (5px + 5px) border of left and right
overflow: hidden;
}
Also give css property to textarea field
textarea {
width: 100%;
max-width: 100%;
resize: none; //It will disable option to resize textarea by textarea bottom-right corner
}
Just try it and let me know if that its working or not
Thank you
答案3
得分: 0
我建议尝试：
body {
height: 100%;
overflow: auto;
}
我不确定它是否有效，因为我没有看到任何实际的HTML。
英文:
I'd recommend trying:
<!-- language: lang-css -->
body {
height: 100%;
overflow: auto;
}
<!-- end snippet -->
I don't know if it will work because I didn't see any actual html
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论