2017-04-17 13 views
5

저는 간단한 멀티 컬럼 레이아웃을 가지고 있습니다; 을 사용하여 :hover에 요소를 들어 올리려고합니다.왜 변환 : Chrome에서 translateY가 깜박입니까?

깜박임이 발생합니다 (Chrome 57에서 테스트 됨). 이 문제를 어떻게 해결할 수 있습니까? transform 속성과 요소에 다음 코드를 배치

"use strict"; 
 

 
$(function() { 
 
    var $target = $('.wall'); 
 

 
    function getImageUrl(id) { 
 
    var width = 500; 
 
    var height = 250 + Math.floor(Math.random() * 150); 
 
    return "https://unsplash.it/" + width + "/" + height + "?image=" + id; 
 
    } 
 

 
    function addElement(element) { 
 
    var $template = $target.find('.template').clone().appendTo($target).removeClass("template"); 
 

 
    $template.find("a").attr("href", element.post_url); 
 

 
    $template.find("img").attr("src", getImageUrl(element.id)); 
 

 
    $template.find("figcaption").text(element.author); 
 

 
    $template.removeClass("hide"); 
 
    } 
 

 
    $.getJSON("https://unsplash.it/list", function (data) { 
 
    var images = 12; 
 
    var elements = []; 
 

 
    function getRandomImage() { 
 
     var id = Math.floor(Math.random() * data.length); 
 
     return data.splice(id, 1)[0]; 
 
    } 
 

 
    while (images > elements.length) {if (window.CP.shouldStopExecution(1)){break;} 
 
     elements.push(getRandomImage()); 
 
    } 
 
window.CP.exitedLoop(1); 
 

 

 
    elements.forEach(function (element) { 
 
     addElement(element); 
 
    }); 
 
    }); 
 
});
.wall { 
 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
      column-count: 3; 
 
    padding-top: 0.5rem; 
 
} 
 
.wall * { 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
      break-inside: avoid; 
 
} 
 
.wall .brick { 
 
    display: block; 
 
    padding-bottom: 1rem; 
 
} 
 
.wall .brick a { 
 
    display: inline-block; 
 
    color: inherit; 
 
    -webkit-transition: -webkit-transform 333ms ease; 
 
    transition: -webkit-transform 333ms ease; 
 
    transition: transform 333ms ease; 
 
    transition: transform 333ms ease, -webkit-transform 333ms ease; 
 
} 
 
.wall .brick a:hover, .wall .brick a:focus { 
 
    -webkit-transform: translateY(-1rem); 
 
      transform: translateY(-1rem); 
 
} 
 
.wall .brick .thumbnail { 
 
    margin-bottom: 0.5rem; 
 
} 
 
.wall .brick figcaption { 
 
    text-align: center; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="wall column"> 
 
    <div class="hide brick template"> 
 
    <a> 
 
     <figure> 
 
     <img class="thumbnail" /><figcaption></figcaption> 
 
     </figure> 
 
    </a> 
 
    </div> 
 
</div>

CodePen Demo

+0

나에게 (Safari 10.1) 맨 위 줄의 중간 및 오른쪽 그림 만 깜박이고 다른 이미지는 의도 한대로 앞뒤로 움직입니다. – 11684

+1

크롬도 Webkit이기 때문에 문제가 해결 될 수 있습니다. http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker – 11684

+0

[This (http://stackoverflow.com/questions)/15751012/css-transform-causes-flicker-in-safari-but-only-the-browser-is-2000px-w)도 비슷합니다. [Google 검색 결과] (https://www.google.nl/#q=css+transform+flicker)를 아직 보셨습니까? 많은 것은 적용 가능해 보인다. – 11684

답변

3

해결해야합니다 귀하의 경우

-webkit-perspective: 1000; 
-webkit-backface-visibility: hidden; 

:

a { 
    display: inline-block; 
    transition: transform 333ms ease; 
    &:hover, &:focus { 
    transform: translateY(-1rem); 
    -webkit-perspective: 1000; 
    -webkit-backface-visibility: hidden; 
    } 
} 
+0

새로운 부트 스트랩 4 카드 데크에서도 같은 수정이 가능합니다! – spaceemotion