Question

我正在使用此代码（http://codepen.io/gschier/pen/HCoqh）作为我的某个网页的灯箱（请参阅此处的页面：http://agentboris.com/newwebsite/press/index.php#_）。

出于某种原因，它在桌面上工作正常，但不会在我的iPhone上显示图像。您可以通过单击“按”区域中的第一个图像来重现该问题。

还有另一个但不太紧迫的问题，当我在iPad上滚动时，灯箱的背景不会掩盖页面的其余部分。最初它确实如此，但当我滚动时，背景似乎“锁定”在位，显示下面的页面的其余部分。您可以通过单击“按”区域中的第一个图像，然后滚动来重现该问题。

这是HTML：

<!--PRESS CONTENT-->
    <div class="presscoll">

        <a href="#65Bremner5301-1015"><img src="images/65Bremner5301-1015-thumb.jpg" width="470" class="round press" /></a>
        <!-- lightbox container hidden with CSS -->
        <a href="#_" class="lightbox" id="65Bremner5301-1015">

          <img src="images/65Bremner5301-1015.jpg" class="round">
        </a>

        <a href="http://www.theglobeandmail.com/life/life-video/style-trumps-amenities-in-summerhill-condo-sale/article13070968/" target="_blank"><img src="images/33-price-video-cover.jpg" class="round press" /></a>

    </div>

                                                                <!--------------------------------------------------------------------> 

    <div class="presscolm">

        <a href="#57alcorn"><img src="images/57alcorn-thumb.jpg" width="470" class="round press" /></a>
        <a href="#_" class="lightbox" id="57alcorn">
            <img src="images/57alcorn.jpg" class="round">
        </a>
        <a href="http://www.theglobeandmail.com/life/life-video/tour-a-high-end-moore-park-new-build/article13070965/" target="_blank"><img src="images/163-heath-video-cover.jpg" class="round press" /></a>
    </div>

                                                                <!-------------------------------------------------------------------->

    <div class="presscolm">
        <a href="http://www.theglobeandmail.com/life/life-video/video-see-how-this-bedford-park-home-sold-for-over-1-million-in-four-days/article12392721/" target="_blank"><img src="images/322-fairlawn-video-thumb.jpg" class="round press" /></a>
    </div>

                                                            <!-------------------------------------------------------------------->


    <div class="presscolr">
        <a href="http://www.theglobeandmail.com/life/life-video/how-much-home-does-27-million-get-you-in-forest-hill/article12870916/" target="_blank"><img src="images/204-rosemary-video-thumb.jpg" class="round press" /></a>
    </div>

    <!--PRESS CONTENT-->

CSS（我编辑的图像使图像可滚动和缩放）：

/** LIGHTBOX MARKUP **/

.lightbox {
    /** Default lightbox to hidden */
    display: none;

    /** Position and style */
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;    
    background-color: #fafbff;
    overflow:auto;
}


.lightbox img {
    /** Pad the lightbox image */
    max-width: 90%;
    margin-top: 2%;
    border: solid 1px #E0E0E0;
}


.lightbox:target {
    /** Remove default browser outline */
    outline: none;

    /** Unhide lightbox **/
    display: block;
}






/** LIGHTBOX MARKUP **/

Answer 1

你的retina.js导致了这个问题。计算宽度和高度时，它返回0，因为图像被隐藏。

您可以尝试通过将图像移出屏幕来隐藏图像。设置.lightbox类首先显示块。然后将它们设置为灯箱类

display: block;
top: -9999px;
left: -9999px;

然后当您点击:target css时，请更新为

.lightbox:target {
    /** Remove default browser outline */
    outline: none;
    top: 0; 
    left: 0;
}

我已经在我的本地进行了测试，它适用于Chrome，也适用于iphone

重要 - 如果您正在运行视网膜macbook pro，您可以在chrome或safari上看到相同的问题。这是一个webkit问题。

CSS灯箱无法在移动设备上运行

1 个答案: