Question

当文本包含在距页面顶部偏移（填充，有边距）的iFrame中时，iOS设备上的移动选择似乎无法正常工作。

在下面的示例中，如果打开页面：https://viking2917.github.io/mobileselectionbug/ 在iOS移动浏览器上，他们点击并按住第一行中的“ amet”一词以将其选中，然后尝试通过拖动文本选择拖动手柄来扩大选择范围，该拖动手柄将立即跳至近处页面底部，如果将其拖动到位，您将看到拖动手柄偏离了手指（看起来像iFrame偏离了页面顶部）。

用于重现此内容的HTML（位于上面的链接中）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no">
  </head>
  <body>
    <div>
      <div>
    <div style="height: 200px;"></div>
    <iframe srcdoc="<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim neque nec ante suscipit semper. Sed sit amet rutrum metus, in mattis ante. Quisque at nunc tellus. Maecenas ut rhoncus erat, sit amet ultricies augue. Aliquam et consectetur mauris. Pellentesque porttitor accumsan pretium. Vivamus risus lorem, varius in laoreet vel, interdum nec metus. Nam gravida vehicula lorem at lobortis. Curabitur sit amet libero ut nulla fermentum volutpat sed at mauris. Ut mollis at tellus vel tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lacinia iaculis odio, sed tincidunt massa accumsan a. Aliquam arcu urna, ullamcorper sagittis nunc eu, facilisis tempor felis. Ut fermentum justo in risus ullamcorper, tempus viverra neque venenatis. Aenean lectus sapien, interdum ut congue non, hendrerit sed diam. Suspendisse ante tellus, luctus eget ex eu, faucibus porttitor nulla.</p><p> Aliquam iaculis placerat tincidunt. Donec justo ligula, dictum ac volutpat accumsan, molestie eu est. Pellentesque lectus est, elementum sed finibus non, scelerisque a nunc. Cras id ornare turpis. Quisque consequat erat turpis. Vestibulum ut nulla feugiat, pretium eros et, dignissim nisi. Sed et finibus turpis. Morbi viverra vulputate lacus.</p><p>Sed in lorem laoreet, gravida metus nec, cursus nunc. Proin dignissim elit id urna imperdiet commodo. Nullam laoreet elementum risus vel tristique. Praesent aliquam ante id nibh condimentum, in semper lectus porta. Proin commodo leo sit amet finibus consectetur. Nam posuere lorem elit, at eleifend odio lobortis nec. Aenean ultricies tellus nec nunc porta, id hendrerit dui malesuada. Aliquam vel lacus feugiat tellus fermentum sollicitudin. Suspendisse consectetur ipsum ac ligula tincidunt molestie. Aenean vel ex eget justo pretium sodales eu sed lectus. Quisque malesuada rutrum tincidunt. Cras sit amet massa pulvinar, fermentum ante in, tristique diam. Etiam nec semper mauris. Donec ultricies purus ut est scelerisque eleifend imperdiet accumsan mi.</p>">
    </iframe>
      </div>
    </div>
  </body>
</html>

我看不到我做错了什么主意吗？

真的感觉像是浏览器错误。这在移动版Chrome，Safari和Firefox上已被破坏。

Answer 1

这是iOS / Safari错误。该修复程序位于12.2的测试版中，将在某个时候发布。此处的详细信息：https://bugs.webkit.org/show_bug.cgi?id=193663

无法在iOS设备（Webkit）上使用iFrame选择文本

1 个答案: