垂直滚动无法在Mobile Safari上运行

时间:2015-10-30 16:54:41

标签: css safari flexbox

出于某种原因,当我在移动版Safari(iOS 9.1,iPhone 5,Safari 8.1)上访问它时,我的网站上的垂直滚动无效:

https://sleepy-anchorage-3222.herokuapp.com

附上了移动版Safari调试结果。我看到的唯一相关错误是5个CSS,字体真棒相关的警告,其他一切都正常。

垂直滚动在iPhone 6上运行良好,在我的桌面浏览器上运行也很好。这里发生了什么??

(注意:我正在使用Font Awesome图标和FlexBox布局,但不确定是否与问题相关)。

MOBILE SAFARI DEBUG CONSOLE

enter image description here

相关的SCSS代码

@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;
  }

1 个答案:

答案 0 :(得分:2)

将此添加到正文标记:

-webkit-overflow-scrolling: touch;

它现在有效。