垂直滚动不适用于Mobile Safari [英] Vertical scroll not working on Mobile Safari
问题描述
由于某种原因,当我在移动Safari(iOS 9.1,iPhone 5,Safari 8.1)上访问垂直滚动条时,我的网站上无法使用垂直滚动条:
相关的SCSS代码
@media(最大宽度: 960px){
>除了{
flex:0 0 100%;
显示:flex;
flex-flow:列nowrap;
身高:100%;
>标头{
flex:0 0 60px;
保证金:0 0px;
}
> main {
flex:1 auto;
身高:100%;
overflow-y:滚动;
padding:0 10px;
}
.restaurant {
margin:30px 0;
& .selected {
box-shadow:0 0 5px 3px rgba(0,0,0,0.5);;
填充:2px;
}
.item-image {
max-width:100%;
}
}
figcaption {
最小高度:80像素;
职位:相对;
}
.item-rating {
display:inline-block;
头寸:绝对;
}
已将其添加到body标签:
-webkit-overflow-scrolling:触摸;
,现在可以使用了。
For some reason, vertical scroll is not working on my website when I access it on mobile Safari (iOS 9.1, iPhone 5, Safari 8.1):
https://sleepy-anchorage-3222.herokuapp.com
The mobile Safari debug results are attached.The only relevant errors I see are 5 CSS, font-awesome related warnings, everything else is normal.
Vertical scroll works fine on iPhone 6, and also its fine on my desktop browser. What's going on here??
(Note: I'm using Font Awesome icons and FlexBox layout, not sure if either are related to the problem though).
MOBILE SAFARI DEBUG CONSOLE
RELEVANT SCSS CODE
@media (max-width:960px){
> aside {
flex: 0 0 100%;
display: flex;
flex-flow: column nowrap;
height: 100%;
> header {
flex: 0 0 60px;
margin: 0 0px;
}
> main {
flex: 1 auto;
height: 100%;
overflow-y: scroll;
padding: 0 10px;
}
.restaurant {
margin: 30px 0;
&.selected {
box-shadow: 0 0 5px 3px rgba(0,0,0,0.5);;
padding: 2px;
}
.item-image {
max-width: 100%;
}
}
figcaption {
min-height: 80px;
position: relative;
}
.item-rating {
display: inline-block;
position: absolute;
}
Added this to body tag:
-webkit-overflow-scrolling: touch;
and it now works.
这篇关于垂直滚动不适用于Mobile Safari的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!