模態彈出式窗口/圖庫（Chrome）中的異常行為

Question

我的網站上“工作”部分的模式彈出窗口/畫廊遇到一些奇怪的過渡行為。

它在Firefox中工作得很好，但是在Chrome中，當您第二次（有時是第一次）打開一個投資組合鏈接時，轉換不會正確進行，顯示的是顛倒的圖像：

彈出窗口中的圖像滑塊基於Owl Carousel構建，但是我不認為問題出在此，而是與模式轉換的工作方式有關。 但是，問題僅出現在使用了滑塊的模態中……其他僅包含單個圖像的彈出窗口沒有相同的問題。

最近的兩天我試圖調試這個煩人的問題，這使我瘋狂。 我沒有嘗試解決此問題的任何方法都奏效-嘗試將Owl Carousel換成其他基於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/zh-CN/docs/Web/CSS/animation-fill-mode

另一個策略是大大簡化事情，並開始添加動畫，直到遇到問題為止。

最后，對於更復雜的過渡，使用http://velocityjs.org/之類的JS庫通常會更有益，然后您可以將其鏈接到過渡/動畫中。 您將獲得更精細的控制，並避免亂砍CSS來使事情正常進行。

模態彈出式窗口/圖庫（Chrome）中的異常行為

問題描述

1 個解決方案

解決方案1
1 2017-03-07 10:43:52

模態彈出式窗口/圖庫（Chrome）中的異常行為

問題描述

1 個解決方案

解決方案1 1 2017-03-07 10:43:52

解決方案1
1 2017-03-07 10:43:52