照片库z-index问题

Question

我正在尝试修改http://tympanus.net/Development/ScatteredPolaroidsGallery/的z-index。我所参考的演示是在显示的第三个/最后一个例子中。

当宝丽来被翻转时，我无法选择chrome或Safari中的文字，但我可以在Firefox中。

Chrome和Firefox

我只需要一种能够在chrome / safari中选择文本的方法。这样我就可以添加超链接和调用当前隐藏在z-index后面的操作按钮。

有问题的div是'photostack-back'

HTML

<section id="photostack-1" class="photostack photostack-start">
<div>
    <!-- Polaroid with backside -->
    <figure>
        <a href="http://goo.gl/fhwlSP" class="photostack-img">
            <img src="img/2.jpg" alt="img02"/>
        </a>
        <figcaption>
            <h2 class="photostack-title">Happy Days</h2>
            <!-- optional backside -->
            <div class="photostack-back">
                <p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
            </div>
        </figcaption>
    </figure>
   </div>
</section

CSS

.photostack-back {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
font-family: "Give You Glory", cursive;
color: #a7a0a2;
padding: 50px 40px;
text-align: left;
font-size: 22px;
line-height: 1.25;
z-index: 1;
}

这是教程Scattered Polaroids Gallery

Answer 1

我发现这不是z-index问题，而是背面可见性问题。

我使用veinjs在photostack.js中注入以下代码

vein.inject('figure', {'backface-visibility' : 'visible !important'});

和css

figcaption {
backface-visibility: hidden;
}