打开网站时，ipad 和 iphone 浏览器崩溃

Posted 2023-03-12

技术标签:

【中文标题】打开网站时，ipad 和 iphone 浏览器崩溃【英文标题】：ipad and iphone browser crashes when opening site 【发布时间】：2015-01-15 12:30:10 【问题描述】：

当您在动画中使用 css 更改字体大小时，似乎 ios（ipad 和 iphone）会崩溃。任何人都知道这是为什么以及如何解决它？真的希望有人对此有答案。据我所知，用 css 动画改变字体大小是完全合法的。

老问题：

我遇到了一个疯狂的问题，我只是不知道发生了什么。我制作了一个简单的网页，它使用 css 动画进行响应。

当有人在 ipad 或 iphone 上尝试加载页面时，他们会收到一个错误，页面不想加载。在android和windows上在所有不同的浏览器上都能完美运行。

我完全一无所知。有人有想法吗？

您可以在http://lerenlezen.brokenhip.be/找到该页面

html代码：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Leren Lezen</title>
    <link rel="stylesheet" type="text/css" href="style/default.css" />    
    </style>
    </head>
    <body>
        <header>
            <a href="#logopedist" id="opzoek" title="Leren Lezen zoekt een logopediste. Klik Hier!">Ben jij een logopediste?</a>
                <h1>Leren Lezen</h1>
                <h2>Een acpp voor het eerste leerjaar</h2>
        </header>
        <article>
           <section>
                <h3>Een app speciaal ontwikkeld voor kinderen uit het eerste leerjaar.</h3>
                <p>Met extra aandacht voor twee- en drieklanken.</p>
                <p>Instelbaar zodat de app het specifiek leerplan exact volgt.</p>
                <p>Weldra in de Google Store!</p>
           </section>
            <form action="form_handler.php" method="post">
                <label for="email">Blijf op de hoogte:</label>
                <input name="email" id="email" type="email" placeholder="email" required />
                <input name="kind" type="hidden" value="sub" />
                <input name="submit" id="submit" type="submit" value="" />         
            </form>
        </article>
        <article id="logopedist">
            <section>
                <h3>Ben je logopediste en wil je helpen?</h3>
                <p>Leren Lezen zoekt een logopediste met perfecte uitspraak en kennis van het leerplan van het eerste leerjaar.</p>
                <p>Het zal slechts een tweetal uur van je tijd innemen, maar ondertussen zal je duizende kinderen helpen!</p>
                <p>Vul je email adres in en we zullen je zoveel mogelijk details door mailen!</p>
            </section>
            <form action="form_handler.php" method="post">
                <label for="email_logo">Ik ben logopediste en wil helpen!<br />Stuur mij meer details:</label>
                <input name="naam_logo" id="naam_logo" type="text" placeholder="Voornaam Achternaam" required />
                <input name="email_logo" id="email_logo" type="email" placeholder="email" required />
                <input name="kind" type="hidden" value="logo" />
                <input name="submit_logo" id="submit_logo" type="submit" value="" /> 
            </form>
        </article>   
    </body>
</html>

如果您删除关键帧处的字体大小，它会加载正常，否则将不会加载。

CSS 代码：

#opzoek 
    opacity: 0.8;
    float: left;
    display: block;
    width:6em;
    height:5em;
    border-radius:50%;
    font-size:1em;
    padding: 2.5em 1em 0.5em 1em;
    color:#fff;
    text-align:center;
    vertical-align: middle;
    background:#F65292;
    shape-inside: circle();
    margin: 0.4em 0 0 0.4em;
    position:absolute;
    font-weight:bold; 
    display: absolute;
    animation:opzoek 5s 1;
    -moz-animation:opzoek 5s 1;
    -webkit-animation:opzoek 5s 1;
    -o-animation:opzoek 5s 1;
    

@keyframes opzoek

    0%      transform: rotate(0deg);left:0px; top: 0;
    25%     transform: rotate(20deg);left:0px; top: 0;
    50%     transform: rotate(0deg);left:25%; top: 0;
    45%     transform: rotate(0deg);left:25%; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; font-size:1.0em;
    70%     transform: rotate(0deg);left:25%;background:#1ec7e6; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; font-size:1.0em;
    80%     transform: rotate(0deg);left:25%; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; font-size:1.6em;
    100%    transform: rotate(-360deg);left:0px; top: 0; width:6em; height:5em; padding: 2.5em 1em 0.5em 1em; font-size:1em;


@-webkit-keyframes opzoek

    0%      -webkit-transform: rotate(0deg);left:0px; top: 0;
    25%     -webkit-transform: rotate(20deg);left:0px; top: 0;
    50%     -webkit-transform: rotate(0deg);left:25%; top: 0;
    45%     -webkit-transform: rotate(0deg);left:25%; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; font-size:1.0em;
    70%     -webkit-transform: rotate(0deg);left:25%;background:#1ec7e6; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; font-size:1.0em;
    80%     -webkit-transform: rotate(0deg);left:25%; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; font-size:1.6em;
    100%    -webkit-transform: rotate(-360deg);left:0px; top: 0; width:6em; height:5em; padding: 2.5em 1em 0.5em 1em; font-size:1em;


@-moz-keyframes opzoek

    0%   -moz-transform: rotate(0deg);left:0px; top: 0;
    25%  -moz-transform: rotate(20deg);left:0px; top: 0;
    50%  -moz-transform: rotate(0deg);left:25%; top: 0;
    55%  -moz-transform: rotate(0deg);left:25%; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; font-size:1.0em;
    70%  -moz-transform: rotate(0deg);left:25%;background:#1ec7e6; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; font-size:1.6em;
    80%  -moz-transform: rotate(0deg);left:25%; top: 6em; width: 10em; height: 9em;
    100% -moz-transform: rotate(-360deg);left:0px; top: 0; width:6em; height:5em; padding: 2.5em 1em 0.5em 1em; font-size:1em;


@-o-keyframes opzoek

    0%   transform: rotate(0deg);left:0px; top: 0;
    25%  transform: rotate(20deg);left:0px; top: 0;
    50%  transform: rotate(0deg);left:50%; top: 0;
    55%  transform: rotate(0deg);left:50%; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; font-size:1.0em;
    70%  transform: rotate(0deg);left:50%;background:#1ec7e6; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; font-size:1.0em;
    80%  transform: rotate(0deg);left:25%; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; font-size:1.6em;
    100% transform: rotate(-360deg);left:0px; top: 0; width:6em; height:5em; padding: 2.5em 1em 0.5em 1em; font-size:1em;

【问题讨论】：

您需要分享您的一些代码，以帮助重现问题，并供将来在网站上参考此问题。实时页面的链接是不可取的，因为一旦问题得到解决，参考资料就会消失。对不起。如果我们能找到它，我会添加导致错误的代码。我只是不知道问题出在哪里。所以我添加了完整的页面（html + css）。当我删除 JS 时会发生同样的错误，我认为不需要添加它。希望有人有想法您应该尝试创建仍然会导致此问题发生的最简单（最短）的程序......这里的社区将简单地忽略带有大量代码转储的问题，因为看起来提问者已经提出没有考虑解决问题。 Stack Overflow reference for Minimal, Complete and Verifiable Examples 我已经考虑解决这个问题，因为我最初认为它与 css 动画有关。所以我首先在动画元素上添加了一个空的 3d 变换来触发 3d 加速，但它失败了，所以之后我删除了所有动画代码。又失败了。删除所有 JS 后，一切仍然失败。最后我再次删除了字体，没有结果。只是错误没有任何意义。这是一个非常简单的小网页。我也没有 ipad 或 iphone 可以测试，所以需要依靠 fb 上的朋友。每次我更改 1 行代码时，我都无法打扰他们。尝试修复您的validation errors，看看是否能解决您的问题 【参考方案1】：

问题似乎在于您的字体大小动画。当然，如果我把你的原始代码放在a JSFiddle 中并在iOS 模拟器中运行，我可以重现崩溃。但是，如果我采用该代码并简单地从 @-webkit-keyframes 关键帧中删除字体大小动画，如下所示：

@-webkit-keyframes opzoek

    0%      -webkit-transform: rotate(0deg);left:0px; top: 0;
    25%     -webkit-transform: rotate(20deg);left:0px; top: 0;
    50%     -webkit-transform: rotate(0deg);left:25%; top: 0;
    45%     -webkit-transform: rotate(0deg);left:25%; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em; 
    70%     -webkit-transform: rotate(0deg);left:25%;background:#1ec7e6; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em;
    80%     -webkit-transform: rotate(0deg);left:25%; top: 6em; width: 10em; height: 7em; padding: 4.5em 1em 0.5em 1em;
    100%    -webkit-transform: rotate(-360deg);left:0px; top: 0; width:6em; height:5em; padding: 2.5em 1em 0.5em 1em;

...我在this JSFiddle 中完成了，然后它不再崩溃，并且动画的其余部分似乎可以工作。

恐怕我对 CSS 关键帧动画了解得不够多，无法知道这是您的代码问题还是移动 Safari 的问题，但这似乎是问题所在。你正在尝试做的事情在我看来足够理智，我可能会将它作为一个错误提出来（我猜是with Apple）。

我的同情。当您自己无法访问移动 Safari 时，调试这样的事情并不容易。使用完整的开发设备来解决它已经够难的了……

如果它可以帮助其他人弄清楚发生了什么，这里是一个最小的复制。此代码在桌面 Safari 上可以正常工作，但会导致移动 Safari 崩溃（至少在 iOS 8.1 中。）

有趣的是，这只是 (a) 旋转和 (b) 在 ems 中指定的 font-size 组合的问题。如果我将字体大小转换更改为使用像素，例如将其动画化为 20px 而不是 1em，它工作正常，所以可能是 em 计算问题。

#opzoek 
    -webkit-animation:opzoek 5s 1;
    /* 
       The display: block isn't necessary for bug reproduction;
       it just makes the animation actually do something on 
       non-mobile Safari. 
    */
    display: block; 


@-webkit-keyframes opzoek

    0%      -webkit-transform: rotate(0deg);
    100%    -webkit-transform: rotate(-360deg); font-size: 1em;

&lt;a href="" id="opzoek"&gt;Words&lt;/a&gt;

JSFiddle here if that makes it easier to see the problem.

【讨论】：

编辑了问题。因为我真的很想知道为什么这是一个问题。据我所知这是css的正确用法。 @brokenhip 似乎是合理的。我只是在我的答案中添加了一个最小的复制案例；它可能会帮助人们追踪正在发生的事情。它看起来像旋转和字体大小的组合。有趣的是，看起来如果您以像素而不是 em 为单位指定字体大小，它可以正常工作，因此这可能是您的解决方法。也许在事物被转换时计算 em-size 会变得很困惑。

以上是关于打开网站时，ipad 和 iphone 浏览器崩溃的主要内容，如果未能解决你的问题，请参考以下文章

请问电脑PC自带IE浏览器和苹果IPHONE或者安卓手机打开同一域名网站时，分别显示不同内容，代码如何修改，

根据浏览器内核判断是web/iOS/android/ipad/iphone 来打开不同的网站或页面

缩放时 Iphone/Ipad 崩溃

iOS 9 Safari webkit 仅在 iPad 上崩溃（iPhone 工作正常）

iPhone 应用程序被拒绝 - 由于 iPad 崩溃，目标设备系列设置为仅 iPhone

当我们执行以下操作时，您的应用程序在运行 iOS 11.1 并连接到 IPv6 网络的 iPad 和 iPhone 上崩溃：