堆棧內存溢出
  簡體   English   中英

HTML，CSS動畫：漂浮在iPhone Safari上，與其他瀏覽器不同

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

 原文  2015-12-14 20:46:02  0   1    html/ css/ animation/ mobile-safari

問題描述

我目前正在開發的網站上有一個奇怪的問題。 靈感來自於從這里拍攝的動畫。 此效果也適用於iPhone Safari。 由於此效果使用了Font Awesome，因此我不能隨意選擇Icon，因此我改編了CSS和HTML以使用所需的任何圖標。 在PC和Android移動設備上可以正常使用，但在Safari中的iPhone上則無法使用。 懸停/聚焦時，圖標顯示如下：

在此處輸入圖片說明

代替這個

在此處輸入圖片說明

您可以訪問此站點以查看問題。 只有第一個藝術家面板使用自定義解決方案。 這是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;
}

1 個解決方案

解決方案1
 1 已采納  2015-12-17 11:23:45

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

希望這可以幫助。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS-Animation適用於Chrome和Safari，但不適用於Firefox和IE CSS動畫：無限循環更改圖像 如何在觸發后取消 css 動畫？ 動畫 CSS 適用於除 safari 之外的所有瀏覽器 CSS Image動畫可在所有瀏覽器中使用，但可以使用Safari CSS 在 Safari 中不工作，但在 Chrome 和其他瀏覽器中可以 從 JS 事件開始的 CSS 動畫，使用可變顏色 暫停圓形菜單的 CSS 動畫以打開和關閉 位置元素：絕對； 由於CSS動畫而跳轉 播放嵌入式YT時停止CSS動畫
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM