HTML、CSS动画：在iphone safari上浮动与其他浏览器不同
我在一个我正在开发的网站上有一个奇怪的问题。灵感来源于一个动画取自。这种效果也适用于iPhone Safari。由于这个效果使用了令人敬畏的字体，我不能自由选择图标，所以我调整了CSS和HTML以使用我想要的任何图标。这在个人电脑和安卓手机上非常有效，但在Safari的iPhone上却不行。悬停/聚焦时，图标显示如下： 而不是这个 您可以访问以查看问题。只有第一个艺术家面板使用自定义解决方案。这是HTMLHTML、CSS动画：在iphone safari上浮动与其他浏览器不同,html,css,animation,mobile-safari,Html,Css,Animation,Mobile Safari,我在一个我正在开发的网站上有一个奇怪的问题。灵感来源于一个动画取自。这种效果也适用于iPhone Safari。由于这个效果使用了令人敬畏的字体，我不能自由选择图标，所以我调整了CSS和HTML以使用我想要的任何图标。这在个人电脑和安卓手机上非常有效，但在Safari的iPhone上却不行。悬停/聚焦时，图标显示如下： 而不是这个 您可以访问以查看问题。只有第一个艺术家面板使用自定义解决方案。这是HTML <body> <div id="wrapper">
<body>
<div id="wrapper">
<div class="section" id="artists">
<div class="section_wrapper">
<div class="title">
<h1>ARTISTS</h1>
</div>
<div class="grid">
<!-- CLINT EASTWOOD -->
<figure onclick="" class="effect-hera">
<img src="gx/artists/clit.jpg" alt="img17"/>
<figcaption onclick="" onclick="">
<h2>Clint <span>Eastwood</span></h2>
<p>
<a><img src="gx/icons/ic_facebook.svg" alt="https://www.facebook.com/eastandslider/?fref=ts" /></a>
<a><img src="gx/icons/ic_soundcloud.svg" alt="https://soundcloud.com/clit-eastwood-1" /></a>
<a><img src="gx/icons/ic_resident.svg" /></a>
<a><img src="gx/icons/ic_gigatools.svg" /></a>
</p>
</figcaption>
</figure>
<!-- (...) -->
</div>
<!-- (...) -->
</div>
</div>
<!-- (...) -->
</body>
更改此CSS块在我的iPhone和mac浏览器上的Safari上工作，只需添加高度值50px，并将转换值更改为-40%，-125%：
figure.effect-hera p {
width: 125px;
text-transform: none;
font-size: 150%;
line-height: 2;
height:50px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40%,-125%,0);
transform: translate3d(-40%,-125%,0);
-webkit-transform-origin: 50%;
transform-origin: 50%;}
figure.effect-hera p {
width: 125px;
text-transform: none;
font-size: 150%;
line-height: 2;
height:50px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40%,-125%,0);
transform: translate3d(-40%,-125%,0);
-webkit-transform-origin: 50%;
transform-origin: 50%;}