草庐IT

html - iOS 不尊重 z-index 与 -webkit-overflow-scrolling

coder 2023-07-25 原文

问题:

在 iOS 上 z-index使用 -webkit-overflow-scrolling 时忽略可滚动区域的.如果两个对象带有 -webkit-overflow-scrolling overlap 下面的那个被滚动，而不是上面显示的那个。

如何复现:

创建两个相互重叠的元素(例如 position: absolute)，其中一个具有更高的 z-index并添加

.selector
{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

他们两个。两个元素都应该有足够的内容可以滚动。

另外添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black">

到您的<head> .然后将该页面添加到您的主屏幕并从那里启动它。

如果您随后尝试滚动上方的元素，则会滚动下面的元素。

MCVE:

或者查看 this pen 。启动 full iOS 设备上的版本，将其添加到主屏幕并从那里启动。

环境:

在装有 iOS 9.1 和 iOS 9.3.2 的 iPhone 5 和 iPhone 6 上测试

观察:

  • 仅当从主屏幕(固定应用)或 Xamarin Webview(可能与 UIWebView 和 WKWebView 有关)启动页面/应用时才会出现此问题
  • 在页面加载后更改设备方向(纵向/横向)后，问题得到解决，直到页面重新加载(也许重新触发布局解决了它？)
  • 更改下部元素 overflow-y至 hidden通过 JS 确实解决了这个问题，但是切换 overflow导致重绘导致性能问题
  • 删除 height: 100%; width: 100%来自 html, body也解决了这个问题，但是必须设置这些百分比值才能正常工作

需要一个适当的解决方案/解决方法来解决此问题，而不会造成任何麻烦的副作用。还要解释为什么会发生这种情况。

最佳答案

本质上，您遇到的是 -webkit-overflow-scrolling: touch; 的 iOS 错误。为了解决这个错误，根据 this answer ，只需将以下 CSS 样式添加到可滚动的 div:

-webkit-transform: translateZ(0px);
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 1000;

总而言之，如果您将上述样式添加到 CSS 中 scrollable 类的样式中，它应该可以工作。在运行 iOS 9 的 iPhone 5s 上测试。请注意，如果您向下滚动到高于其他所有内容的可滚动部分的底部或顶部，它将开始滚动正文。

我相信这些额外的样式会诱使 iPhone 使用 GPU，但请记住，它们只是由于 Safari 的错误才需要的 - 这不是你的错，这些额外的样式实际上并不需要包括。但是将它们放入您的 CSS 中，它应该像梦一样工作!

关于html - iOS 不尊重 z-index 与 -webkit-overflow-scrolling，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37696746/

webkit-overflow-scrollingscrollingcodeoverflowhtmlioscssscrollz-index

有关html - iOS 不尊重 z-index 与 -webkit-overflow-scrolling的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  5. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  6. Ruby 文件 IO 定界符？ - 2

    我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？ 最佳答案 接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  7. ruby-on-rails - Capybara-webkit 引发 Capybara::Driver::Webkit::WebkitInvalidResponseError - 2

    我在rspec中收到来自webkit驱动程序的以下消息:Capybara::Driver::Webkit::WebkitInvalidResponseError:UnabletoloadURL:http://127.0.0.1:44923/posts几天前它成功了。问题出在save_page方法上。有什么问题吗？ 最佳答案 当我的页面出现错误时，我收到过类似的错误消息。您应该通过在测试模式下启动服务器(railss-etest)并自行访问页面来手动检查情况是否如此。 关于ruby-on-

  8. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  9. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

  10. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

随机推荐