HTML、CSS-动画：在 iphone safari 上浮动与其他浏览器不同

Question

我正在开发的网站上有一个奇怪的问题。灵感来自取自 here 的动画。此效果也适用于 iPhone Safari。由于此效果使用 Font Awesome，我无法自由选择图标，因此我调整了 CSS 和 HTML 以使用我想要的任何图标。这在 PC 和 Android 移动设备上运行良好，但在 Safari 中的 iPhone 上运行不佳。当hovered/focused时，图标显示如下：

而不是这个

您可以访问this site查看问题。只有第一个艺术家面板使用自定义解决方案。这是 HTML

<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（还包括原始效果的CSS）

* { box-sizing: border-box }
html, body{
    font-family: 'theano_didotregular';

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;

    color: #eeeeee;
    margin:auto;
    padding:0px;
}

#wrapper{
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}


.section_wrapper{
    max-width: 1000px;
    margin: auto;
} 

#artists{
    overflow: hidden;
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 97%;
    background-color: #111111;
}

/** EFFECT HERA **/
    .grid, .gridFull {
    width: 100%;
    margin: auto;
    cursor: pointer;
    position: relative;
    z-index: 90;
    text-align: center;
}

/* Common style */
.grid figure {
    position: relative;
    overflow: hidden;
    margin: 10px 1%;
    min-width: 250px;
    min-height: 250px;
    max-width: 300px;
    max-height: 300px;
    text-align: center;
    display: inline-block;
    float: none;
}

.gridFull figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 20px 2%;
    max-width: 750px;
    max-height: 450px;
    width: 66%;
    height: auto;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}


.grid figure img,
 .gridFull figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
}

.grid figure figcaption,
 .gridFull figure figcaption {
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption,
.grid figure figcaption > a ,
.gridFull figure figcaption,
.gridFull figure figcaption > a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a,
.gridFull figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.grid figure h2,
 .gridFull figure h2 {
    word-spacing: -0.15em;
    font-weight: 300;
}

.grid figure h2 span,
 .gridFull figure h2 span {
    font-weight: 800;
}

.grid figure h2,
.grid figure p,
 .gridFull figure h2,
 .gridFull figure p {
    margin: 0;
}

.grid figure p ,
 .gridFull figure p{
    letter-spacing: 1px;
    font-size: 68.5%;
}
figure.effect-hera h2 {
    font-size: 158.75%;
}

figure.effect-hera h2,
figure.effect-hera p {
    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(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
}

figure.effect-hera figcaption::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
    transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
}

figure.effect-hera p {
    width: 100px;
    text-transform: none;
    font-size: 150%;
    line-height: 2;
}

figure.effect-hera p a {
    color: #fff;
}

figure.effect-hera p a:hover,
figure.effect-hera p a:focus {
    opacity: 0.6;
}

figure.effect-hera p a i{
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-hera p a:first-child i{
    -webkit-transform: translate3d(-60px,-60px,0);
    transform: translate3d(-60px,-60px,0);
}

figure.effect-hera p a:nth-child(2) i{
    -webkit-transform: translate3d(60px,-60px,0);
    transform: translate3d(60px,-60px,0);
}

figure.effect-hera p a:nth-child(3) i{
    -webkit-transform: translate3d(-60px,60px,0);
    transform: translate3d(-60px,60px,0);
}

figure.effect-hera p a:nth-child(4) i{
    -webkit-transform: translate3d(60px,60px,0);
    transform: translate3d(60px,60px,0);
}


figure.effect-hera p a img{
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    max-width: 35px;
    max-height: 35px;
    float: left;
    margin: 7px;
}

figure.effect-hera p a:first-child img{
    -webkit-transform: translate3d(-60px,-60px,0);
    transform: translate3d(-60px,-60px,0);
}

figure.effect-hera p a:nth-child(2) img{
    -webkit-transform: translate3d(60px,-60px,0);
    transform: translate3d(60px,-60px,0);
}

figure.effect-hera p a:nth-child(3) img{
    -webkit-transform: translate3d(-60px,60px,0);
    transform: translate3d(-60px,60px,0);
}

figure.effect-hera p a:nth-child(4) img{
    -webkit-transform: translate3d(60px,60px,0);
    transform: translate3d(60px,60px,0);
}


figure.effect-hera:hover p img:empty{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
    opacity: 1;
    visibility: visible; 
}


figure.effect-hera img {
    opacity: 0.9;
}

figure.effect-hera img{
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-hera:hover img {
    opacity: 0.7;
    -webkit-transform: scale3d(1.25,1.25,1);
    transform: scale3d(1.25,1.25,1);
}

figure.effect-hera:hover figcaption::before {
    opacity: 1;
    -webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
    transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}

figure.effect-hera:hover h2 {
    opacity: 0;
    -webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
    transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}

figure.effect-hera:hover p i:empty{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
    opacity: 1;
}

Answer 1

更改此 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%;}

希望对您有所帮助。

HTML、CSS-动画：在 iphone safari 上浮动与其他浏览器不同

HTML, CSS-Animation: floating on iphone safari not like in other browsers

html

css

animation

mobile-safari