Animacja CSS 3 "transformacja: skala" na elemencie kolumny nie działa na chrome

Question

Wystąpił problem w przeglądarce Chrome v44, próbowałem powiększyć obraz w kolumnie za pomocą "transform: scale (1.1)" animacja nie działa ... A jeśli spróbuję na firefoxie, to działa dobrze! Myślę, że problem jest spowodowany przez chrome, ale chciałbym wiedzieć, czy ktoś znalazł obejście problemu.

.column-wrap { 
     columns: 3; 
    } 

    .column-item { 
     background-color: red; 
    } 

    .column-img-wrap { 
     margin: 0; 
     overflow: hidden; 
    } 

    .column-img { 
     display: block; 
     max-width: 100%; 
     height: auto; 
     transform: scale(1); 
     transition: transform .3s ease; 
    } 

    .column-img:hover { 
     transform: scale(1.1); 
     transition: transform .3s ease; 
    } 

o to demo: http://codepen.io/anon/pen/YyKgyW

dzięki

EDIT: Znalazłem rozwiązania: -webkit-tylna strona-visibility: hidden; Dodaję tę właściwość do klasy pakowania obrazu ".column-img-wrap" oraz klasy obrazu ".column-img" i działa idealnie!

Answer 1

Znalazłem obejście: -webkit-backface-visibility: hidden; Dodaję tę właściwość do klasy pakowania obrazu ".column-img-wrap" oraz klasy obrazu ".column-img" i działa idealnie!

.column-img-wrap { 
    margin: 0; 
    overflow: hidden; 
    -webkit-backface-visibility: hidden; 
} 

.column-img { 
    display: block; 
    max-width: 100%; 
    transform: scale(1); 
    transition: transform .3s ease; 
    -webkit-backface-visibility: hidden; 
} 

demo: http://codepen.io/nielk/pen/gaOaVz