CSS 3 Animation "transform: scale" auf Spaltenelement funktioniert nicht auf Chrom

Question

Ich stoße auf ein Problem in Chrome v44, ich habe versucht, das Bild in der Spalte mit einer "transform: scale (1.1)" zu vergrößern , die Animation funktioniert nicht ... Und wenn ich auf Firefox versuche, funktioniert es gut! Ich denke, das Problem liegt an Chrome, aber ich würde gerne wissen, ob jemand einen Workaround gefunden hat.

.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; 
    } 

hier ist eine Demo: http://codepen.io/anon/pen/YyKgyW

dank

EDIT: Ich fand eine Abhilfe: -webkit-Backface-Sichtbarkeit: hidden; Ich füge diese Eigenschaft der Image Wrapper Klasse ".column-img-wrap" und der Image Klasse ".column-img" hinzu und es funktioniert perfekt!

Answer 1

Ich habe einen Workaround gefunden: -webkit-backface-visibility: hidden; Ich füge diese Eigenschaft der Image Wrapper Klasse ".column-img-wrap" und der Image Klasse ".column-img" hinzu und es funktioniert perfekt!

.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