模式彈出式菜單/圖庫（Chrome）中的奇怪行爲

我遇到了一些奇怪的過渡行爲，在我網站上的工作部分的模式彈出/畫廊。模式彈出式菜單/圖庫（Chrome）中的奇怪行爲

它工作在Firefox不錯，但在Chrome中，當你已經打開了投資組合中的一個鏈接第二次 - 有時是第一次 - 過渡不正確地發生，呈倒置圖像：

彈出窗口中的圖像滑塊建立在貓頭鷹旋轉木馬上，但我認爲問題並非如此，而是與模式轉換的工作方式有關。然而，這個問題只發生在我已經使用滑塊的模塊上......其他只包含單個圖像的彈出窗口沒有相同的問題。

我花了最後兩天試圖調試這個令人討厭的問題，它正在驅動我瘋狂。沒有任何我試圖解決它已經工作 - 試圖用一個不同的基於輪播的插件替換貓頭鷹旋轉木馬沒有任何區別。我只是想得到它解決，所以我可以轉移到下一件事 - 可以有人請幫我解決這個問題？ :(

這是我_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>

來源

2017-03-07 FuManchuNZ

另外我的main.js文件裏面包含了所有的主要Javascript：http://www.samnorris.net/portfolio-ss/themes/portfolio/js/main.js – FuManchuNZ

我一直沒能複製您的問題，但我的猜測是Chrome無法重置您打開組合件的狀態，因爲你只需把它隱藏在關閉覆蓋（不反向過渡）時。這裏有太多的事情要我指出這是什麼地方，但你可能會指定一個animation-fill-mode運氣。這會通知瀏覽器哪個狀態用作啓動/端點。它可以幫助你「重置」事物。 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

另一種策略是非常簡單的事情，並開始添加動畫回來，直到你遇到問題。

最後，對於更復雜的轉換，使用類似http://velocityjs.org/這樣的JS庫通常更有利，您可以將它們鏈接在一起，以便轉換/動畫。你會得到更好的粒度控制，並避免在你的CSS中黑客入侵以使事情發揮作用。

來源

2017-03-07 10:43:52

哦，好吧，我還是很困惑我是第一個tbh ...但感謝您的建議。 – FuManchuNZ

模式彈出式菜單/圖庫（Chrome）中的奇怪行爲

回答

相關問題