ホバー効果がiPhoneでのみ機能しない

Question

私は珍しい問題があります。それはAndroidの携帯電話では動作しますが、iPhoneでは動作しません。私はiPhone 4とiPhone 6でそれをテストしました。

jsFiddle Demo

CSS：

.address { 
    position: relative; 
    overflow: hidden; 

    /* Only the -webkit- prefix is required these days */ 
    -webkit-transform: translateZ(0); 
      transform: translateZ(0); 
} 
.address h1{ 
    margin: 0px auto; 
    text-align: center; 
    padding: 10px 0px; 
    font-size: 24px; 
    color: #00426e; 
} 

.address::before { 
    content: ' '; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: transparent; 
    transition: background .35s ease-out; 
} 

.address:hover::before { 
    background: transparent; 
} 

.address__media { 
    display: block; 
    min-width: 100%; 
    max-width: 100%; 
    height: auto; 
} 

.address__overlay { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 10px; 
    color: #00426e; 
    -webkit-transform: translateY(100%); 
      transform: translateY(100%); 

    transition: -webkit-transform .35s ease-out; 
    transition:   transform .35s ease-out; 
} 

.address:hover .address__overlay { 
    -webkit-transform: translateY(0); 
      transform: translateY(0); 
} 

.address__overlay__title { 
    -webkit-transform: translateY(-webkit-calc(-100% - 10px)); 
      transform: translateY(calc(-100% - 10px)); 

    transition: -webkit-transform .35s ease-out; 
    transition:   transform .35s ease-out; 
} 

.address:hover .address__overlay__title { 
    -webkit-transform: translateY(0); 
      transform: translateY(0); 
} 

HTML：

<article class="address"> 
    <img class="address__media" src="https://i.imgsafe.org/f0a95617f8.png"> 
    <div class="address__overlay"> 
     <h1 class="address__overlay__title">London</h1> 
     <p class="address__overlay__content"> 
      This is a test address<br /> 
      Okay, it's an awesome address<br /> 
      Cool Bro 
     </p> 
    </div> 
</article> 

あなたは問題がある可能性がどう思いますか？追加する必要のあるiPhone固有のCSSがありますか？

Answer 1

position: absoluteを.address::beforeからコメントアウトして削除しても機能します。

https://jsfiddle.net/0fugn1uv/10/

そしてまた、あなたの遷移のいくつかは、その前に-webkit-必要です。それはまだそれなしで動作します。しかし、それをそこに置くことは安全です。

Answer 2

デバイスのホバーオプションは、タッチデバイスのonclickのように機能します。あなたはホバースタイルが適用されていないので、あなたは、.address::beforeない.addressに触れている「ロンドン」のテキストをタッチすると.address::beforeから、あなたの場合は

position:absoluteはとても基本的に他のすべてのdivの上にあります。

z-indexが正しく指定されていないため、デフォルト値が適用され、他のデバイスで動作する理由が考えられます。

"絶対値"を削除するか、Z値の小さい値を割り当てることができます。

.address::before{ 
content: ' '; 
position: absolute; 
top: 0; 
z-index:-1;/*added code*/ 
right: 0; 
bottom: 0; 
left: 0; 
background: transparent; 
transition: background .35s ease-out; 
} 

更新fiddle z-indexの値が小さい。