时间戳

首页 > 解决方案 > 新的 iOS 13 音量滑块错误（与 CSS 相关？）

ios - 新的 iOS 13 音量滑块错误（与 CSS 相关？）

问题描述

将我的 iPhone 8 Plus 更新到 iOS 13 后，我注意到我网站上的新音量 HUD 出现了奇怪的行为。与音量按钮交互后，新的音量 HUD 不会消失。它缩小为一个简单的条形，但永远不会完全消失。只发生在一些我有固定视图的网页中，没有垂直滚动。它可以与CSS规则相关吗？一旦我点击“返回”，或者转到另一个启用了垂直滚动的页面，音量 HUD 就会像往常一样消失。其他人有这个问题吗？如果你这样做了，是什么原因造成的，你是如何解决的？这非常烦人，因为音量 HUD 的新位置涵盖了我注意到问题所在的那些网页中的一堆控件，因此需要找到解决此问题的解决方案，并保持 iOS12 或更低版本用户的功能。

我注意到 iframe 的另一个问题，那些应该以这种格式滚动的问题：

<div style="overflow-x:scroll">
    <iframe >
        ...
        <video></video>
    </iframe>
</div>

在 ios12 中，iframe 曾经与它包含的视频宽度相同，比如说 1200px 宽度，在移动设备上我能够水平滚动 iframe，并专注于我想要的部分。在 ios13 中，iframe 的宽度是设备的宽度，这意味着我不能再水平滚动它。我有一个临时修复，使用 jQuery 我获取视频的宽度并将其应用于 iframe，但这会导致新问题，我想回到原来的状态。为什么 ios13 中的 iframe 与 ios12 中的 iframe 不同？

谢谢

已经尝试一一删除 CSS 规则并查看导致此问题的原因，但到目前为止还没有运气。查看删除溢出：隐藏规则以及 -webkit-overflow-scrolling 规则以查看这是否相关，只有我能想到的可能与它有关。或者可能是一个元标签？? 但是这个是添加在我网站上的每个网页上的，所以不是。

预期结果：正常行为，音量 HUD 在任何地方与其交互后消失。

iframe 可滚动，无需 jQuery 为 iframe 设置固定宽度

编辑：导致问题的代码块。删除块将清除问题。所以我的猜测仍然是关于 CSS 规则的。

<div id="webcam" style="height: 100%; width: 100%; overflow-x: scroll; overflow-y: hidden;position: relative; background-color: black;">
    <video id="h5live-webcam" type="application/vnd.apple.mpegURL" playsinline="true" src="https://stream01.****.com:443/h5live/http/playlist.m3u8?url=rtmp%3A%2F%2Fwowza02.****.com%aaabad&amp;stream=1000000.mp4%3FcSessionId%3DguestKey&amp;random=142989" style="width:initial; margin:0px; transform:none; height:100%; width:initial;"></video>
    <div id="middleView-webcam" style="width: 83px; height: 83px; position: absolute; left: 50%; top: 50%; margin-right: -50%; transform: translate(-50%, -50%); z-index: 1000;">
        <canvas id="loadingSign-webcam" style="z-index: 1001;"></canvas>
    </div>
</div>

更新 2：问题与 NanoPlayer 和播放选项（静音、自动静音等）有关。还没有解决，但缩小了范围。

标签： iosiphoneupdatesvolumeios13

解决方案

iOS 13 改变了 iframe 的行为。他们过去不滚动和扩展以适应内容（展平）。它们现在像所有其他浏览器一样工作。使用滚动 DIV 解决 iOS iframe 滚动问题的应用程序可能会受到影响。试图找出是否有一种方法可以通过配置来恢复这种帧的禁用扁平化，以便 iOS 13 可以像 iOS 13 之前的版本一样运行。这是一个巨大的信息。

有关已删除功能，请参阅 iOS 13 的发行说明：

在 iOS 上禁用框架展平。框架现在以与桌面浏览器相同的方式呈现。

bugzilla中列出的错误信息。

推荐阅读