垂直滚动不适用于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屋！