模态弹出窗口/图库（Chrome）中的奇怪行为

Question

我在网站上的“工作”部分的模态弹出窗口/图库中遇到了一些奇怪的过渡行为。

它在 Firefox 中运行良好，但在 Chrome 中，当您第二次（有时是第一次）打开其中一个作品集链接时，转换不会正确发生，显示颠倒的图像：

弹出窗口中的图像滑块是基于 Owl Carousel 构建的，但我认为问题不在于它，而是与模态转换的工作方式有关。但是，该问题仅发生在我使用滑块的模态中...仅包含单个图像的其他弹出窗口没有相同的问题。

过去两天我一直在尝试调试这个烦人的问题，这让我抓狂。我没有尝试修复它 - 尝试用不同的基于轮播的插件更换 Owl Carousel 并没有任何区别。我只是想解决它，这样我就可以继续下一件事了 - 有人可以请帮我解决这个问题吗？ :(

这是我的 _work.scss 文件：

#work.paddingstandard {
  padding-bottom: 0px !important;
}


/* ---- isotope grid---- */

#portfoliogrid .item {
  width: 20%;
  float: left;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: -1px;
  padding-bottom: 0;
}

#portfoliogrid .item.width2 {
  width: 40%;

}

#portfoliogrid img {
  width: 100%;
  float: left;
  height: auto;
}

/* Item rollover */

#work .item .rollover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 15px;
  text-align: center;
}

#work .item .rollover:before {
  content: "";
  position: absolute;
  height: 50%;
  width: 50%;
  left: 25%;
  top: 26%;
  opacity: 0;
  margin-top: 40px;
  transition: all 0.2s 0.3s, opacity 0.3s 0.6s, margin-top 0.3s 0.6s;
  transform: rotateZ(-45deg);
  -webkit-transition: all 0.2s 0.3s, opacity 0.3s 0.6s, margin-top 0.3s 0.6s;
  -webkit-transform: rotateZ(-45deg);
  background:rgba(196, 71, 65, 0.85);

}

#work .item.width2 .rollover:before {
  width: 25%;
  left: 38%;

}

#work .item .rollover .centerContainer {
  opacity: 0;
  height: 100%;
  transition: all 0.3s 0.1s;
  transform: rotateZ(-5deg);
  -webkit-transition: all 0.3s 0.1s;
  -webkit-transform: rotateZ(-5deg);

}

#work .item .rollover .centerContainer a {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: $white;
  display: block;
  text-transform: uppercase;
  text-decoration: none !important;

  &.details {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02rem;
    color: $grey-800;
  }

}

#work .item .rollover .centerContainer .title {
  font-size: 2.8rem;
  line-height: 2.8rem;
  margin-bottom: 15px;
}

#work .item:hover .rollover:before,
#work .portfolioActive .rollover:before {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 1;
  margin-top: 0;
  transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
  transform: rotateZ(0deg);
  -webkit-transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
  -webkit-transform: rotateZ(0deg);

}

#work .item:hover .centerContainer,
#work .portfolioActive .centerContainer {
  opacity: 1;
  transition: all 0.3s 0.6s;
  transform: rotateZ(0deg);
  -webkit-transition: all 0.3s 0.6s;
  -webkit-transform: rotateZ(0deg);

}



/* WORK OPEN ANIMATION */

@keyframes turn {
  0% {
    transform: rotate(45deg);
  }

  15% {
    transform: rotate(135deg);
  }

  25% {
    transform: rotate(135deg);
  }

  40% {
    transform: rotate(225deg);
  }

  50% {
    transform: rotate(225deg);
  }

  65% {
    transform: rotate(315deg);
  }

  75% {
    transform: rotate(315deg);
  }

  90% {
    transform: rotate(405deg);
  }

  100% {
    transform: rotate(405deg);
  }

}

#workLoader {
  position: absolute;
  z-index: 10000;
  -webkit-transition: all 0.8s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

}

#workLoader .iconloader {
  position: relative;
  z-index: 20;
  display: block;
  margin: 0 auto;
  width: 30px;
  height: 100%;
  width: 100%;

}

#workLoader .iconloader:after {
  content: "";
  width: 50%;
  height: 50%;
  position: absolute;
  top: 25%;
  left: 25%;
  background-color: rgba(196, 71, 65, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transform: rotateZ(45deg);
  animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
  -webkit-transform: rotateZ(45deg);
  -webkit-animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
  -ms-transform: rotate(45deg);

}

#workLoader.width2 .iconloader:after {
  width: 25%;
  left: 38%;
}

#workLoader .front, #workLoader .back {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

}

#workLoader .front {
  text-align: center;
  z-index: 0;
}

#workLoader .front img {
  width: 100%;
  opacity: 0.2;
}

#workLoader .back {
  background-color: rgba(20, 20, 20, .95);
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);

}

#workLoader .back #wrkclosebtn {
  position: fixed;
  top: 10px;
  right: 20px;

}

#workLoader .back .fa-times {
  font-size: 2rem;
  cursor: pointer;
  color: #5f5f5f

}

#workLoader .back .fa-times:hover {
  color: #FFFFFF
}

.scale100 {
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  transform: perspective(1000px) rotateX(-180deg);
  -webkit-transform: perspective(1000px) rotateX(-180deg);

}

#workdetailcontainer.darkBackground {
  padding-top: 40px;
}

/* FIX IE 9/10/11 */

.IE #workLoader {
  transition: all .8s !important;
  transform: none;
}

.IE #workLoader .front, .IE #workLoader .back {
  transition: all .8s !important;
}

.IE #workLoader .back {
  transform: perspective(1000px) rotateX(180deg) !important;
}

.IE #wrkclosebtn {
  display: none;
}

.IE .scale100 #wrkclosebtn {
  display: inline;
}

.IE .scale100 {
  transition: none !important;
  transform: rotateX(0deg) !important;
}

.IE #workLoader.scale100 .back {
  transform: perspective(1000px) rotateX(0deg) !important;
  z-index: 10;

}

.IE #workLoader.scale100 .front {
  transform: perspective(1000px) rotateX(-180deg) !important;
}

.IE9 #workLoader {
  background-color: green;
  opacity: 0;
}

/* ==========================================================================

  WORK DETAILS

========================================================================== */

#workdetail {
  padding: 40px 0;

  h1 {
    color: #FFFFFF;
    line-height: 4rem;
    margin-bottom: 35px;
    margin-top: 0px;
    font-size: 4rem;
    text-align: left;
  }

  p {
    @include safe-rem(margin-bottom, 25);
    color: $white
  }

}


#workdetail #detailImg img {
  width: 100%;
}

#workdetail .workDouble #detailImg {
  margin-bottom: 35px;
}


#workdetail #details {
  margin-bottom: 35px;
  font-size: 0.9rem;

  span {
    @include safe-rem(padding-right, 8);
    color: $red-100;
  }

  li {
    @include safe-rem(margin-bottom, 12);
    color: $white;
  }

}


/* ==========================================================================

  ISOTOPE FILTERS GENERAL

========================================================================== */

.isotopeFilter {
  margin-top: 25px;
  margin-bottom: 40px;
}

.isotopeFilter a {
  @include safe-rem(padding, 0 25 0 25);
  font-size: 1.250rem;
}

.isotopeFilter .is-checked {
  color: $red;
}

这是一个主要的 HTML 示例：

   <div id="portfoliogrid">
        <!-- Begin item -->
        <div class="item width2 ui">
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="$ThemeDir/work-gallery-1.html">STARTUP BROS</a>
                        <a class="details" href="$ThemeDir/work-gallery-1.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <!-- Item Image -->
            <img src="$ThemeDir/img/work/startupbros-1.jpg" alt="Portfolio" />
        </div>

这是一个模态弹出窗口中的 HTML 示例：

<div id="workdetail">

    <section class="container">

        <div class="workDouble">

            <div id="detailImg">

                <div id="sliderwork1" class="owl-carousel">

                    <div class="item"><img src="themes/portfolio/img/work/startupbros-large-1.jpg" alt="Startup Bros" /></div>

                    <div class="item"><img src="themes/portfolio/img/work/startupbros-large-2.jpg" alt="Startup Bros" /></div>

                    <div class="item"><img src="themes/portfolio/img/work/startupbros-large-3.jpg" alt="Startup Bros" /></div>

                    <div class="item"><img src="themes/portfolio/img/work/startupbros-large-4.jpg" alt="Startup Bros" /></div>

                </div>

            </div>

            <article>

                <h1>STARTUP BROS</h1>

                <p>Pellentesque erat velit, pretium vitae dui tempor, scelerisque posuere mi. Etiam fringilla scelerisque nulla volutpat vehicula. Donec tempus ut diam ac pharetra. Quisque quis odio convallis, imperdiet purus dignissim, tempor urna. Curabitur ut nisl nec orci scelerisque vehicula vitae eu nunc. Mauris et felis ligula. Maecenas tincidunt, augue a pulvinar laoreet, arcu nunc semper felis, lobortis gravida elit tellus non nisl.</p>

                <ul id="details">

                    <li><span>CLIENT:</span>Company Name</li>

                    <li><span>RELEASE DATE:</span>20 February 2014</li>

                    <li><span>TAGS:</span>Photography, Corporate, Flat</li>

                </ul>

                <a href="https://www.behance.net/gallery/47278647/StartupBros-UI-concepts-WIP" target="_blank>"><button class="large" href="#">LAUNCH PROJECT</button></a>

            </article>

        </div>

    </section>

</div>

<!-- End content of project details -->

<script data-scriptdetail="">

    $(document).ready(function() {

        var $sliderwork = $("#sliderwork1");

        if($sliderwork.length){

            $sliderwork .owlCarousel({

                loop : true,

                animateIn: 'backSlideIn',

                animateOut: 'backSlideOut',

                autoplay: true,

                autoplayTimeout: 3000,

                margin : 20,

                nav: false,

                dots: false,

                items : 1

            });
        }
    });

</script>

Answer 1

我无法复制您的问题，但我的猜测是 Chrome 不会重置您打开的作品集的状态，因为您只是在关闭叠加层时将其隐藏（而不是反转转换）。这里发生的事情太多了，我无法确定它在哪里，但你可能会幸运地指定animation-fill-mode。这会通知浏览器使用哪个状态作为起点/终点。它可以帮助您“重置”事物。 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

另一个策略是非常简单的事情并开始添加动画直到你遇到问题。

最后，对于更复杂的过渡，使用像 http://velocityjs.org/ 这样的 JS 库通常更有益，然后您可以将过渡/动画链接在一起。您将获得更细粒度的控制，并避免修改您的 CSS 以使事情正常进行。