我实现了以下代码，以防止屏幕允许用户在使用ipad时看到网站的弹性溢出。
.main-layout::ng-deep {
width: 100%;
height: 100%;
position: fixed;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
//overflow: hidden;
}
代码似乎运行良好，但现在页面底部的页脚被剪掉了，这似乎只是IOS safari上的一个问题。我希望页脚保持在页面底部而不会被截断。我已经看到了使用JavaScript的解决方案，但理想情况下我只想使用CSS。
所以我有一个固定的地方，我防止弹性卷轴。但是页脚被剪掉了，用户无法向下滚动查看。
这是页脚的CSS
.footer {
@media (max-width: $screen-sm-max) {
font-size: 12px;
}
@media (max-width: $screen-sm-min) {
font-size: 10px;
}
@extend .center;
height: $header-height;
text-align: center;
width: 100%;
background-color: $gray-ltr;
font-size: 14px;
overflow: auto;
border-top: 2px solid $gray-lt;
}
我在iPhone上为iOS制作web应用程序时也遇到过类似的问题。不确定它是否能在iPad上帮助你，但值得一试。
我找不到任何一个停止CSS或JS来修复这个问题。当你不想从safari iOS browswer的顶部去掉任何多余的白色时，这会让人沮丧。
我使用的可能帮助你的搁浅工作是用CSS做这件事…
HTML,
BODY {
min-height: 100%;
height: 100%;
overflow: hidden;
@include position(fixed, 0 0 0 0);
}
.webapp-container {
@include position(absolute, 0 0 0 0);
overflow: scroll;
}
位置是用波旁威士忌，如果你不使用波旁威士忌的话，你可以正常地写位置。
用HTML添加一个额外的div。。。
<body>
<div class="webapp-container">
New body content with no elastic scrolling
</div>
</body>
你的页脚似乎没有任何固定的位置，所以你在这个方法中的原始代码不应该有任何问题。