CODEWITHSUNDEEP
ioscssiphonehtmlipad
brokenhip
brokenhip

Reputation: 67

ipad and iphone browser crashes when opening site

It seems ios (ipad and iphone) crash when you change the font-size with css in an animation. Anyone has an idea why this is and how to fix it? Really hope someone has an answer to this. As far as I know changing font-size with css animation is completely legit.

Old question:

I am having a crazy problem and I just have no idea what is going on. I made a simple webpage that is responsive with a css animation.

When someone on an ipad or iphone tries to load the page they get an error and the page doesn't want to load. On android and windows it works perfectly on all different browsers.

I am completely clueless. Anyone got an idea?

You can find the page at http://lerenlezen.brokenhip.be/

html code:

<!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>

If you remove the font-size at the keyframes it loads fine else it won't load.

CSS code: 

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

Upvotes: 2

Views: 649

Answers (1)

Matt Gibson
Matt Gibson

Reputation: 38238

The problem seems to lie with your font-size animation. Certainly, if I take your original code, put it in a JSFiddle and run it in the iOS simulator, I can reproduce the crash. However, if I take that code and simply remove the font-size animations from the @-webkit-keyframes keyframes, as follows:

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

...which I've done in this JSFiddle, then it no longer crashes, and the rest of the animation seems to work.

I'm afraid I don't know enough about CSS keyframe animation to know whether that's a problem with your code or a problem with mobile Safari, but that appears to be the issue. What you're trying to do looks sane enough to me, and I'd probably raise it as a bug (I'm guessing with Apple).

My commiserations. It can't be easy to debug something like this when you don't have access to mobile Safari yourself. It was hard enough figuring it out with a full development rig...

If it helps anyone else figure out what's going on, here's a minimal reproduction. This code will work fine on desktop Safari, but crashes mobile Safari (in iOS 8.1, at least.)

Interestingly, it's only a problem with a combination of (a) the rotation, and (b) the font-size being specified in ems. If I change the font-size transition to use pixels, e.g. animate it to 20px rather than 1em, it works fine, so perhaps it's an em-calculation issue.

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

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

Upvotes: 3

Related Questions