javascript - Google Grid Gallery Safari 模态滚动

Question

我正在重新设计一个网站，并从 codrops 看到了这个蓝图:https://tympanus.net/codrops/2014/03/21/google-grid-gallery/ .我喜欢它的外观，并认为它真的可以帮助我的画廊脱颖而出。

我已经能够集成图库脚本和 WordPress，但模态窗口存在一个小问题。当您单击缩略图时，模态窗口将打开……您会看到标题、图片和一些文本。窗口的高度已设置，但一些文本不适合窗口，所以我决定启用滚动。

滚动适用于 Internet Explorer、Firefox 和 Google Chrome。不幸的是，滚动似乎在 Safari 中被禁用或锁定，我不确定是什么导致了这个问题。我很确定它与 css 有关系，但是在删除了这里那里的代码片段后，我无法找到罪魁祸首。

我正在进行的工作位于:http://www.joshrodg.com/test/

代码如下:

<div class="container">
    <div id="grid-gallery" class="grid-gallery">
        <section class="grid-wrap">
            <ul class="grid">
                <li class="grid-sizer"></li><!-- for Masonry column width -->
                <li>
                    <figure>
                        <figcaption>
                            <h3>Alan Zinter</h3>
                            <a href="http://joshrodg.com/test/wp-content/uploads/img_043.jpg" rel="lightbox[80]"></a>
                            <p>
                                Inducted in 2009<br>
                                Four year letterman for Hanks High School<br>
                                All District and All City Honoree<br>
                                El Paso High School Player
                            </p>
                        </figcaption>
                    </figure>
                </li>
            </ul>
        </section><!-- // grid-wrap -->
        <section class="slideshow">
            <ul>
                <li>
                    <figure>
                        <figcaption>
                            <h3>Alan Zinter</h3>
                            <a href="http://joshrodg.com/test/wp-content/uploads/img_043.jpg" rel="lightbox[80]"></a>
                            <p>
                                Inducted in 2009<br>
                                Four year letterman for Hanks High School<br>
                                All District and All City Honoree<br>
                                El Paso High School Player of the Year in 1986 as a senior<br>
                                Had a .505 batting average<br>
                                Led the state in home runs with 15<br>
                                Led the state in runs batted in with 51<br>
                                Earned baseball scholarship from the University of Arizona<br>
                                As a freshman, he led the team with 7 triples in 1987<br>
                                Played in Alaska Collegiate League and led his team the Mat Su Miners to win the 1987 NBC World Series in Wichita Kansas<br>
                                His sophomore year at Arizona, he led the team in hits with 79 and led the Wildcats in runs batted in with 55<br>
                                Following his sophomore year he played in the Cape Cod League for the Harwich Mariners<br>
                                Played with Team USA in Taiwan – – 1988<br>
                                Led Team USA with a .412 batting average and helped lead them to a Silver Medal with a 6-1 record<br>
                                His junior year he tied the Arizona Wildcats team record with 18 home runs and led the team in runs batted in with 81 RBI and had a .352 batting average<br>
                                Named to the NCAA, Baseball America, The Sporting News and ABCA All American teams<br>
                                Named Pac 10 Conference “Co Player of the Year” with teammate pitcher Scott Erickson<br>
                                Finalist for 1989 Golden Spikes Award<br>
                                Led University of Arizona in hitting categories each of his three years playing in 162 games with 211 hits, 29 home runs, 357 total bases, 35 doubles, 12 triples,                                         172 RBI’s with a .336 batting average<br>
                                Chosen in the First Round, 24th overall selection by the New York Mets in the 1989 Professional Draft<br>
                                Played 19 seasons of professional baseball (1989-2007) with the Mets, Tigers, Red Sox, Mariners, Cubs, Diamondbacks, Astros and in Japan<br>
                                Named to All Star teams for Florida State League (1990) and Pacific Coast League (1997 and 1998)<br>
                                In his 19 seasons, he had 1,562 hits, 276 home runs, 1,013 runs batted in and a .257 batting average<br>
                                Made his major league debut in Milwaukee on June 18, 2002 against the Brewers while playing for the Houston Astros<br>
                                First Major League hit was a home run for the Astros against the Cincinnati Reds in 2002<br>
                                Played in Major Leagues for Astros and Arizona Diamondbacks organizations<br>
                                Hitting Coach for Arizona Diamondbacks minor league teams at Missoula and Visalia in 2008 and 2009
                            </p>
                        </figcaption>
                    </figure>
                </li>
            </ul>
            <nav>
                <span class="icon nav-prev"></span>
                <span class="icon nav-next"></span>
                <span class="icon nav-close"></span>
            </nav>
        </section><!-- // slideshow -->
    </div><!-- // grid-gallery -->
</div>

CSS 看起来像:

 /* Made with http://icomoon.io/app */

/* General style */
.grid-gallery ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.grid-gallery figure {
    margin: 0;
}

.grid-gallery figure img {
    display: block;
    height: auto;
    width: 100%;
}

.grid-gallery figcaption h3 {
    color: #cc0000;
    font-size: 20px;
    line-height: 25px;
    padding: 0 0 10px;
    text-align: center;
}

.grid-gallery figcaption p {
    color: #084872;
    margin: 0;
}

/* Grid style */
.grid-wrap {
    max-width: 69em;
    margin: 0 auto;
    padding: 10px 1em 1.875em;
}

.grid {
    margin: 0 auto;
}

.grid li {
    width: 25%;
    float: left;
    cursor: pointer;
}

.grid figure {
    padding: 15px;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.grid li:hover figure {
    opacity: 0.7;
}

.grid figcaption {
    background: #e4e4e4;
    padding: 25px;
}

/* Slideshow style */
.slideshow {
    position: fixed;
    background: rgba(0,0,0,0.6);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}

.slideshow-open .slideshow {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.slideshow ul {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,150px);
    transform: translate3d(0,0,150px);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.slideshow ul.animatable li {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.slideshow-open .slideshow ul {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.slideshow li {
    width: 660px;
    height: 560px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -280px 0 0 -330px;
    visibility: hidden;
}

.slideshow li.show {
    visibility: visible;
}

.slideshow li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.8);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.slideshow li.current:after {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
    transition: opacity 0.3s, visibility 0s 0.3s;
}

.slideshow figure {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 25px solid #fff;
    overflow: auto;
}

.slideshow li figure img {
    float: left;
    margin-right: 15px;
    width: auto;
    max-width: 300px;
}

.slideshow figcaption {
    padding-bottom: 20px;
}

.slideshow figcaption h3 {
    color: #dd0000;
    font-weight: 300;
    font-size: 30px;
    padding: 0 0 20px;
    text-align: center;
}

.slideshow figcaption p {
    overflow: hidden;
}

/* Navigation */
.slideshow nav span {
    position: fixed;
    z-index: 1000;
    color: #59656c;
    text-align: center;
    padding: 3%;
    cursor: pointer;
    font-size: 2.2em;
}

.slideshow nav span.nav-prev,
.slideshow nav span.nav-next {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.slideshow nav span.nav-next {
    right: 0;
}

.slideshow nav span.nav-close {
    top: 0;
    right: 0;
    padding: 0.5em 1em;
    color: #31373a;
}

.icon:before,
.icon:after {
    font-family: "Ionicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

span.nav-prev:before {
    content: "\f124";
}

span.nav-next:before  {
    content: "\f125";
}

span.nav-close:before {
    content: "\f2d7";
}

/* Info on arrow key navigation */
.info-keys {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 60px;
    font-size: 8px;
    padding-top: 20px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 1px;
    text-align: center;
}

.info-keys:before,
.info-keys:after {
    position: absolute;
    top: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #fff;
    text-align: center;
    line-height: 14px;
    font-size: 12px;
}

.info-keys:before {
    left: 10px;
    content: "\e603";
}

.info-keys:after {
    right: 10px;
    content: "\e604";
}

/* Example media queries (reduce number of columns and change slideshow layout) */

@media screen and (max-width: 60em) {
    /* responsive columns; see "Element sizing" on http://masonry.desandro.com/options.html */
    .grid li {
        width: 33.3%;
    }
    .slideshow li {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin: 0;
    }
    .slideshow li figure img {
        width: auto;
        margin: 0 auto;
        max-width: 100%;
    }
    .slideshow nav span,
    .slideshow nav span.nav-close {
        font-size: 1.8em;
        padding: 0.3em;
    }
    .info-keys {
        display: none;
    }
}

@media screen and (max-width: 35em) {
    .grid li {
        width: 50%;
    }
}

@media screen and (max-width: 24em) {
    .grid li {
        width: 100%;
    }
}

感谢任何帮助。

谢谢，
乔希

Answer 1

我最终选择一起删除 Lightbox，并坚持在使用滚动条的常规页面上加载内容 :-)