当您在动画中使用css更改字体大小时,似乎ios(ipad和iphone)崩溃。 任何人都知道为什么会这样,以及如何解决它? 真的希望有人能回答这个问题。据我所知,用css动画改变font-size是完全合法的。
老问题:
我遇到了一个疯狂的问题,我只是不知道发生了什么。 我创建了一个响应css动画的简单网页。
当ipad或iphone上的某人试图加载页面时,他们会得到一个 错误,页面不想加载。在android和windows上 适用于所有不同的浏览器。
我完全无能为力。有人有想法吗?
找到该页面
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;}
}
答案 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
,它运行正常,因此可能是计算问题。
#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;