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

时间:2015-01-15 12:30:10

标签: ios css iphone html5 ipad

当您在动画中使用css更改字体大小时,似乎ios(ipad和iphone)崩溃。 任何人都知道为什么会这样,以及如何解决它? 真的希望有人能回答这个问题。据我所知,用css动画改变font-size是完全合法的。

老问题:

  

我遇到了一个疯狂的问题,我只是不知道发生了什么。   我创建了一个响应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>

如果你删除了关键帧的font-size,那么它会加载,否则它将无法加载。

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;}
}

1 个答案:

答案 0 :(得分:3)

问题似乎在于你的字体大小的动画。当然,如果我把你的原始代码放在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,它运行正常,因此可能是计算问题。

&#13;
&#13;
#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; }
}
&#13;
<a href="" id="opzoek">Words</a>
&#13;
&#13;
&#13;

JSFiddle here if that makes it easier to see the problem