javascript - 隐藏在内容后面的 iOS 12 中的 Bootstrap 模态 Iframe-6ren

javascript - 隐藏在内容后面的 iOS 12 中的 Bootstrap 模态 Iframe

转载作者：太空狗更新时间：2023-10-29 15:09:43

我在 iOS 12 上的 Safari 的 iframe 中显示的 Bootstrap 4.1 模式有问题。测试的所有其他浏览器都按预期工作(甚至是 iOS 11 上的 Safari)。该问题似乎特定于 iOS 12。

我创建了一个 minimal example demonstrating the issue .前两个按钮似乎按预期运行，但是最后 4 个按钮您可以看到问题，向下移动时每个按钮都更糟，当您尝试滚动或关注内部的元素时，最后一个按钮一起消失模态(见下面的截图):

我会注意到我们正在以一种可能有点非正统的方式处理此功能，因为我们不是允许 iframe 的内容滚动，而是在它加载后通过在父子之间传递消息来调整它的高度message 事件处理程序和 postMessage:https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage这是我怀疑出现问题的地方(但尚未能够追踪到它(如前所述，这只是运行版本 12 的 ios 设备上的问题))。

编辑

最近发现这个问题并不是 iOS 12 上的 Safari 特有的，chrome 也是如此。

下面的代码来自之前的最小示例链接:

父级(/modal-test/index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Title</title>

    <link rel="stylesheet" href="./bootstrap.min.css">

    <script src="./jquery.min.js"></script>
    <script src="./popper.min.js"></script>
    <script src="./bootstrap.min.js"></script>

    <script>
        $(document).ready(function(){

            $ifCon = $("#ifCon");

            window.addEventListener("message", function(event){
                if(event.data.method === "returnWindowSize"){
                    $ifCon.height(event.data.content);
                }
            }, false);

        });
    </script>

    <style>

        #ifCon {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
            background-color: #F2F2F2;
            overflow: hidden;
            border-radius:10px;
            border:1px solid grey;
            margin-left:auto;
            margin-right:auto;
            /*box-shadow:2px 2px 3px #000;*/
            box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.75);
        }
        #ifCon iframe {
            flex-grow: 1;
            border: none;
            margin: 0;
            padding: 0;
        }

    </style>


</head>
<body>

    <div class="container">

        <div class="row">

            <div class="col text-center">

                <div id="ifCon">
                    <iframe height="100%" width="100%" scrolling="no" src="/modal-test/frameable.html"></iframe>
                </div>

            </div>

        </div>

    </div>

</body>
</html>

子级(/modal-test/frameable.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Title</title>

    <link rel="stylesheet" href="./bootstrap.min.css">

    <script src="./jquery.min.js"></script>
    <script src="./popper.min.js"></script>
    <script src="./bootstrap.min.js"></script>

    <script>

        var $embedContent, modalState;


        $(document).ready(function(){

            $embedContent = $('#embedContent');

            parent.postMessage({method:"returnWindowSize", content:$embedContent.height()}, '*');


            $('.modal').on('shown.bs.modal', function(e){

                modalState = {
                    id:$(this).attr('id'),
                    contentElement:$(this).find('.modal-content'),
                    initialContentContainerHeight:$embedContent.height(),
                    invokerElement:$(e.relatedTarget)
                };

                adjustModal();

            });

            $('.modal').on('hidden.bs.modal', function(e){
                modalState = null;
                $(this).find('.modal-content').css("margin-top", "0px");
                $embedContent.css('height', 'auto');
                parent.postMessage({method:"returnWindowSize", content:$embedContent.height()}, '*');
            });


        });


        function adjustModal(){

            if(modalState.contentElement.css('margin-top') !== modalState.invokerElement.offset().top){
                modalState.contentElement.animate({'margin-top':modalState.invokerElement.offset().top}, 200, "linear");
            }

            if(

                // modal position + modal height is greater than or equal to the height of the embedContent so we need to resize the
                // embedContent (make it taller)
                ((modalState.invokerElement.offset().top + modalState.contentElement.height()) >= $embedContent.height()) ||

                // modal position + modal height is less than or equal to the height of the embedContent AND the current height of the
                // embedContent is greater than or equal to the size of the embedContent height when the modal was originally shown
                (((modalState.invokerElement.offset().top + modalState.contentElement.height()) <= $embedContent.height()) &&
                    ($embedContent.height() > modalState.initialContentContainerHeight))

            ){
                var newEmbedContentHeight = modalState.invokerElement.offset().top + modalState.contentElement.height() + 30;
                $embedContent.height(newEmbedContentHeight);
                parent.postMessage({method:"returnWindowSize", content:newEmbedContentHeight}, '*');
            }

        }

    </script>


</head>
<body>


    <div id="embedContent" class="container">

        <div class="row" style="height:200px;margin-top:100px;">
            <div class="col text-center">
                <button id="btn1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                  Launch demo modal
                </button>
            </div>
        </div>

        <div class="row" style="height:200px;">
            <div class="col text-center">
                <button id="btn2" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                  Launch demo modal
                </button>
            </div>
        </div>

        <div class="row" style="height:200px;">
            <div class="col text-center">
                <button id="btn3" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                  Launch demo modal
                </button>
            </div>
        </div>

        <div class="row" style="height:200px;">
            <div class="col text-center">
                <button id="btn3" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                  Launch demo modal
                </button>
            </div>
        </div>

        <div class="row" style="height:200px;">
            <div class="col text-center">
                <button id="btn3" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                  Launch demo modal
                </button>
            </div>
        </div>

        <div class="row" style="height:200px;">
            <div class="col text-center">
                <button id="btn3" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                  Launch demo modal
                </button>
            </div>
        </div>

    </div>


    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" 
        aria-labelledby="exampleModalLabel" aria-hidden="true" data-focus="false" style="overflow-y:hidden;">
      <div class="modal-dialog" role="document">
        <div class="modal-content" style="margin-top:500px;">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="exampleFormControlInput1">Email address</label>
                <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
              </div>
              <div class="form-group">
                <label for="exampleFormControlInput1">Email address</label>
                <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
              </div>
              <div class="form-group">
                <label for="exampleFormControlSelect1">Example select</label>
                <select class="form-control" id="exampleFormControlSelect1">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
              <div class="form-group">
                <label for="exampleFormControlSelect1">Example select</label>
                <select class="form-control" id="exampleFormControlSelect1">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
              <div class="form-group">
                <label for="exampleFormControlSelect1">Example select</label>
                <select class="form-control" id="exampleFormControlSelect1">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
              <div class="form-group">
                <label for="exampleFormControlSelect1">Example select</label>
                <select class="form-control" id="exampleFormControlSelect1">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>




</body>
</html>

最佳答案

最终的解决方案是我们需要通过在 <head></head> 中包含以下 css 来强制硬件加速子文档(iframe 中的元素(在本例中为 frameable.html)):

<style>
    body{
        transform: translate3d(0,0,0);
    }
</style>

但是我无法解释为什么这可以解决问题，或者为什么 ios12 需要它而不是 ios11。如果其他人可以阐明该主题，我相信这会对以后的其他人有所帮助。

关于javascript - 隐藏在内容后面的 iOS 12 中的 Bootstrap 模态 Iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57513308/

文章推荐： c - 关于 C 中的字符指针

文章推荐： android - 如何在构建过程中从 .so 文件中删除符号

文章推荐： Android FaceDetector.findFaces 没有找到任何人脸

algorithm - n!模 m , a^p 模 m
是否有更快的算法来计算 (n! modulo m)。在每个乘法步骤都比减少更快。并且有没有比左右二元法更快的算法来计算 (a^p modulo m)。这是我的代码:n!模数m ans=1 for(i
javascript - if 条件满足但不适用(模)
我有非常简单的代码循环遍历数组中的元素并检查是否index % 2 == 0。如果是这样，它应该改变颜色。 var e = document.getElementById("list").childN
javascript - 模 - 计算错误
让我简短一点。我正在计算 alert((Math.pow(7,35))%71) 但它给了我 61，而结果必须是 70。怎么了？最佳答案正如其他人之前提到的关于使用 Math.pow(7,35) 的
gcc - 模(%)的GCC实现是如何工作的，为什么不使用div指令？
我试图弄清楚如何在汇编中计算模 10，所以我在 gcc 中编译了以下 c 代码，看看它想出了什么。 unsigned int i=999; unsigned int j=i%10; 令我惊讶的是我得到
java - 如何在不使用 "%"运算符的情况下计算两个数字的余数/模？
例如使用以下输入: int num = -100 int divisor = 10 => -100 mod 10 = 0 (Edge-case: negative numbers as inpu
C++ rand() 模 float
这个问题在这里已经有了答案: Random float number generation (14 个答案) 关闭 9 年前。在 C++ 中，我希望得到一个随机 float 。据我所知，典型的随机
c - 相同除数时快速 AVX512 模
我试图找到潜在阶乘素数的除数(n!+-1 形式的数)，因为我最近购买了 Skylake-X 工作站，我认为我可以使用 AVX512 指令提高一些速度。算法简单，主要步骤是对同一个除数重复取模。主要是
math - 如何找到与 i 模 m 一致的最小正整数？
我有一个保存角度(以度为单位)的变量，该角度可以是正值也可以是负值。我现在需要确保该数字仅在 0 到 360 之间。该数字是 double 。执行此操作的好算法是什么？简单地执行角度 % 360 是
swift - CheckSum8 模 256 Swift
我有一个 UInt8 数组，我想计算 CheckSum8 模 256。如果字节总和小于 255，checkSum 函数返回正确的值。例如 let bytes1 : [UInt8] = [1, 0xa
我可以依赖 C 中的 %(模)运算符来获取负数吗？
使用海湾合作委员会: printf("%i \n", -1 % (int)4); printf("%u \n", -1 % (unsigned int)4); 输出: -1 3 我可以跨平台依赖这种行
c++ - 模 : The Purpose of An Undefined Integer
我无法理解代码中几行的含义。我最近开始学习 C++，并阅读了 Bjarne Stroustrup 的“编程:使用 C++ 的原理和实践”。第四章有个问题让我很困惑，所以我在网上搜索了一个解决方案以供引
algorithm - 解释以下算法以求 nCr 模 P
我试图解决一个涉及大阶乘模质数的问题，并在另一个人的解决方案中发现了以下算法: long long factMod (long long n, long long p) { long long
java - 斐波那契 n 模 m
我正在尝试计算 𝐹𝑛 模 𝑚，其中 𝑛 可能非常大:高达 10^18，𝐹𝑛 是第 n 个斐波那契数这是我的代码，它适用于小数字，但对于大数字，它会抛出 OutOfMemoryError 或
algorithm - 检查循环(模 16)数是否大于另一个？
我有两个以 16 为模的循环整数，因此它们的值介于 0 和 15 之间。我需要比较两个数字以确定 n_1 是否大于 n_0 n_1 > n_0 很明显，这个没有准确定义，所以我定义n_1如果小于前面
java - 一些 Java 模/余数运算符问题
我一直在尝试使用 Java 处理一些更大的值，但遇到了一些我不理解的问题。出于某种原因，Java 似乎喜欢给我垃圾数据(尽管，我更可能告诉它给我垃圾数据) 这是一个片段，为清楚起见进行了编辑:
c++ - 模 - gcc 的操作数顺序错误？还是UB？
好吧，我今天做了一个小函数，它应该会生成一个随机字符串。 std::string randString(size_t length) { std::string randStr; fo
带负数的 Ruby 模 3 不直观
Ruby 的负数取模规则不明确。在 IRB 中: -7 % 3 == 2 应该是1!为什么？最佳答案因为 -7/3 在 Ruby 的整数除法语义下是 -3。 3*-3 是 -9，所以会留下 2
javascript - 模 % 大数 - 无穷大错误 - Javascript
这个问题在这里已经有了答案: Calculating pow(a,b) mod n (14 个答案) 关闭 6 年前。在 Javascript 中是否有获取大数模数的技巧。我用 modulo(7,
lua - 2^65 模 101 错误答案
此代码使用公式 (a^x) % 101 检查值 a 是否唯一映射到值 1 到 100 local function f(a) found = {} bijective = true
java - 模 32 或 64 约简是什么？
在《Core Java Volume1》一书中有一条警告: CAUTION: The right-hand side argument of the shift operators is reduce

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 隐藏在内容后面的 iOS 12 中的 Bootstrap 模态 Iframe

编辑