twitter-bootstrap - 悬停效果不适用于 iPhone

Question

我有一个不寻常的问题。它适用于 Android 手机，但不适用于 iPhone。我在 iPhone 4 和 iPhone 6s 上对其进行了测试。

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

从 .address::before 中注释掉或删除 position: absolute 并且它有效。

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

此外，您的一些转换在此之前需要 -webkit-。没有它它仍然有效。但是把它放在那里是安全的。