垂直滚动不适用于 Mobile Safari

2024-05-05

由于某些原因,当我在移动 Safari(iOS 9.1、iPhone 5、Safari 8.1)上访问我的网站时,垂直滚动无法正常工作:

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

附上移动 Safari 调试结果。我看到的唯一相关错误是 5 个 CSS、font-awesome 相关警告,其他一切正常。

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

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

移动 Safari 调试控制台

相关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;
  }

将其添加到 body 标签中:

-webkit-overflow-scrolling: touch;

现在可以了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

垂直滚动不适用于 Mobile Safari 的相关文章

  • 是否可以使materialize.css模态更大并删除垂直滚动条?

    我刚刚创建了按钮 单击后会弹出一个模式 每个按钮都有一个显示不同练习 gif 的模式 然而 模态框太小 导致用户无法看到整个 gif 迫使他们向下滚动 我想删除滚动条并使模态更大 以便用户可以看到整个 gif 任何帮助都会很棒 这是我的代码
  • Flexbox 调整大小和可滚动溢出[重复]

    这个问题在这里已经有答案了 我有正在调整大小的内容 并且我想要一个固定标题 该标题不会增大 缩小 并且不属于可滚动内容的一部分 如果空间不足 下面的内容将变得可滚动 内容外包装 flexGrowWrapper has a flex grow
  • 如何在asp.net背后的代码中获取css样式

    我需要从 asp net c 中的代码后面获取 css 样式 在网上没有找到解决方案 是否可以直接从 styles css 文件获取它 还是需要解决方法 我在我的网络应用程序中使用主题 但我还需要进行一些服务器处理 并且我需要 ccs 文件
  • 如何按时间间隔翻转div

    您好 请看这个脚本并告诉我如何按时间间隔翻转 A B 和 C div 我希望A先翻转然后停止 B接下来翻转并停止 然后C然后再次回到A B和C 就像循环一样 然后重新开始 这在 CSS3 中可能吗 在此代码中 所有 div 同时翻转 HOL
  • 在 UIWebView 中禁用复制和粘贴

    几乎 我已经尝试了一切方法来禁用复制 粘贴UIWebView但对我来说没有任何作用 我正在加载我的UIWebView来自字符串 字符串数组 如下所示 webView loadHTMLString NSString stringWithFor
  • 什么可能导致 Firefox 中出现此 HTML/CSS 渲染问题?

    款式 h2 color 71D0FF font size 11px font weight bold margin 0px 0px 5px 0px a box color FFFFFF important cursor pointer di
  • Sphinx内联代码高亮

    我使用 Sphinx 制作一个包含代码示例的网站 我成功地使用了 code block获取语 法高亮的指令 但我无法使用此代码获得内联语法突出显示 role bash code language bash Test inline bash
  • 居中

    我的问题 http i56 tinypic com ff3jmo png http i56 tinypic com ff3jmo png 项目符号点未对齐 我要做的只是 text align center ing ul 所在的类 我可以对齐
  • Safari 扩展应用程序未显示在 Safari 首选项“扩展”选项卡中

    我已遵循以下提到的所有说明创建您的第一个 Safari 扩展应用程序 https developer apple com library content documentation NetworkingInternetWeb Concept
  • 什么时候可以使用Javascript,什么时候不可以?

    不使用太多 javascript jquery 是个好习惯吗 我们应该尽可能避免它 为了良好的可访问性 吗 什么时候可以使用 JavaScript 什么时候不能在网页设计和开发中使用 JavaScript 在什么场景 什么条件下 Updat
  • 悬停时的 CSS 过渡

    我有个问题 实际上 当我将鼠标悬停在对象上时 我尝试在 div 上进行转换 所以基本上我有一个div 当我将鼠标悬停在div上时 它应该在其顶部显示另一个div 但是它应该被转换 这样悬停效果会更平滑 如果我有这两个 div 怎么可能 di
  • 从后面的代码添加外部 css 文件

    我有一个 CSS 文件 例如 SomeStyle css 我是否可以将此样式表文档从其代码隐藏应用到 aspx 页面 您可以将文字控件添加到标头控件中 Page Header Controls Add new System Web UI L
  • 使用 CSS 在 javaFX 中设置按钮样式

    我在使用 CSS 的 javaFX 中设置按钮样式时遇到问题 我使用 Intellij Idea IDE 我有 CSS css 文件 Button fx padding 8 15 15 15 fx background insets 0 0
  • 在分词前添加连字符

    也许这是不可能的 但我想知道是否有一种方法可以在打破单词之前自动在长字符串的末尾插入一个连字符 并且没有空格 这jsfiddle http jsfiddle net 76qBy 演示了我遇到的问题 谢谢 table width 200px
  • h1、h2、h3.. 元素吃掉 div 边距

    为什么 h1 h2 h3 元素在 div 中的边距会被忽略 http jsfiddle net TzmdZ http jsfiddle net TzmdZ div class col h3 This is header h3 div div
  • div 全宽的响应式背景图像

    我正在尝试弄清楚如何在 div 全宽和响应式中制作背景图像 背景图像在页面的宽度上扩展 并且具有响应性 但图像的高度不是其完整高度 似乎它被某种方式切断了 我正在使用引导框架 我尝试这样做的原因是我想在图像上覆盖一些文本 我尝试了很多不同的
  • 使用百分比宽度进行布局时如何修复 Internet Explorer 7 错误?

    请帮助我 我需要使用百分比宽度创建布局 我有一个 100 宽度的包装纸 现在我有一个 DIV 主要包装器 我想将其保持在 94 宽度百分比 100 主体的 94 好吧 所以为了让这个简单 gt BODY 100 宽度设置 gt 容器 94
  • Chrome 中的 OpenType 设置由字体粗细和字体样式重置

    我在用Raleway https fonts google com specimen Raleway来自 Google Fonts 作为我项目的主要字体 一切都很好 直到我注意到数字以 旧式 模式显示 这意味着某些数字具有从字体基线向上或向
  • CSS 过渡或动画从顶部向上滑动:100% 到底部:0

    内部 div 的高度可变 具体取决于内部文本的长度 该高度始终比外部 div 短 我希望当外部 div 悬停时 内部覆盖 div 从 top 100 向上滑动到bottom 0 我下面的 CSS 代码没有产生我想要的向上滑动效果 它只是在外
  • CSS 或 Javascript - 如果背景图像未加载,则显示后备文本[重复]

    这个问题在这里已经有答案了 如果徽标图形文件未加载或丢失 如何显示文本而不是徽标 我有带有背景 PNG 图像的 div div class iHaveBgImage this text should be displayed if bg i

随机推荐

  • 将引导加载程序存储在软盘映像上的哪里?

    我将编写并测试引导加载程序 为了做到这一点 我计划将引导加载程序复制到软盘映像文件上并将其安装在虚拟机中 但是 我不确定将引导加载程序的机器代码放在哪里 它是否只是转储到文件的前几个字节中 软盘的引导扇区是第一个扇区 如果您谈论的是原始软盘
  • 如何在 Rails 中每天缓存一个值?

    在 Rails 中每天缓存一个值的最佳方法是什么 我有一个可通过 API 访问的数据库调用 我想每天制作并存储它 做到这一点的最佳方法 做法是什么 假设你有一个widget price您只想每 24 小时更新一次 通常你使用Widget c
  • 从 Dockerfile 写入 docker 卷不起作用

    请考虑以下 Dockerfile FROM phusion baseimage VOLUME data RUN touch data HELLO RUN ls ls data 问题 data 目录不包含 HELLO 文件 此外 任何其他写入
  • 为什么 Redshift 不需要物化视图或索引?

    In the 红移常见问题解答 https aws amazon com redshift faqs under 问 与大多数用于数据仓储和分析的传统数据库相比 Amazon Redshift 的性能如何 它说如下 高级压缩 列式数据存储比
  • Python,将CSV文件转换为SQL表

    我有一个没有标题的 CSV 文件 并尝试从文件中的某些列创建 SQL 表 我尝试了这里给出的解决方案 使用 Python 将 CSV 文件导入 sqlite3 数据库表 https stackoverflow com questions 2
  • 使用 AspectJ LTW 允许 spring 代理功能自调用非公共方法及相关注意事项

    我见过很多与 Spring 相关的功能示例 Cacheable Transactional Async等等 每次都会重复相同的选项 通过代理对象进行的自调用通过以下任一方式获得ApplicationContext getBean MySer
  • python 2.7 字符 \u2013 [重复]

    这个问题在这里已经有答案了 我有以下代码 coding utf 8 print u William Burges 1827 81 was an English architect and designer 当我尝试从cmd运行它时 我收到以
  • 如何转到材料日历视图中选定的日期?

    我在用着材料日历视图 https github com prolificinteractive material calendarview在我的项目中 我可以使用 setSelectedDate 方法更改日期的选择 我有一个 今天选择 按钮
  • 全局主题目录的 iis 快速路径

    我正在使用 Visual Studio 2010 SP1 ASP NET Webforms Framework NET 3 5 和IIS 快递 也称为 WebMatrix 我在 Visual Studio 中使用我的网站收到以下编译错误 T
  • 当模式在范围内时使用 sed 打印范围?

    我有一个充满查询的日志文件 我只想查看有错误的查询 日志条目类似于 path to file executing query QUERY SIZE ROWS MSG DURATION 我想打印所有这些东西 但只有当MSG 包含一些有趣的内容
  • 在 C# 整数运算中,a/b/c 是否始终等于 a/(b*c)?

    设a b和c为非大正整数 对于 C 整数算术 a b c 是否始终等于 a b c 对我来说 在 C 中它看起来像 int a 5126 b 76 c 14 int x1 a b c int x2 a b c 所以我的问题是 x1 x2对于
  • GWT 和 Web 服务 (wsdl)

    谁能告诉我一种从 GWT 客户端访问 WSDL Web 服务的方法 这可能吗 Thanks 智能网关 http www smartclient com product index jsp支持 WSDL 数据源 除此之外 您始终可以将 WSD
  • JavaScript 和数据库连接

    javascript可以直接访问数据库吗 我觉得我的问题是反问 因为这是一个安全问题 但这有可能吗 有可能的 有了新的html5功能 js可以通过WebSql连接 一个活生生的例子 http html5demos com database
  • 仅打印 drupal field_view_field 值

    我使用下面的代码将节点字段打印到特定区域 效果很好 但有一个例子 我只想打印没有标签的字段值 看起来应该很容易 但我遇到了一些麻烦 我很感激任何帮助 因为我对 drupal 还很陌生 谢谢 field view value 需要一个 dis
  • c# 如何在注册表中写入十六进制值,而不是十进制值?

    如何在注册表中写入 DWORD 十六进制值 而不是像此代码示例中那样的十进制值 RegistryKey key Registry LocalMachine key klase CreateSubKey SYSTEM CurrentContr
  • 是使用多个数据库各有一个架构更好,还是一个数据库有多个架构更好? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 After 这条评论 https stackoverflow com questions 1130555 postgresql pitr bac
  • 如何使用 django-haystack 和 elasticsearch 后端进行模糊搜索?

    看起来好像elasticsearch支持模糊查询 http www elasticsearch org guide reference query dsl fuzzy query http www elasticsearch org gui
  • 使用 TFS 2010 的团队是否需要 Active Directory?

    我是 TFS 2010 的新手 希望在一个由 2 3 名远程人员组成的团队的小型项目中公平地尝试一下 是否要求我的所有团队用户都属于 Active Directory 网络设置 或者我可以让我的团队成员松散耦合并能够使用用户名 密码登录吗
  • Android SDK 缺少命令行工具

    我已经安装了flutter但当我跑步时flutter doctor为了验证安装 我得到 Android SDK is missing command line tools 我已经仔细检查了命令行是否已安装 我需要做什么才能消除此错误 我已经
  • 垂直滚动不适用于 Mobile Safari

    由于某些原因 当我在移动 Safari iOS 9 1 iPhone 5 Safari 8 1 上访问我的网站时 垂直滚动无法正常工作 https sleepy anchorage 3222 herokuapp com https slee