Chrome圖像轉換（圖像消失）

我目前遇到了一個我正在開發的網站的問題。（網上商店），當您將鼠標懸停在其上時，產品上會有放大功能。然而在鉻中，這似乎不起作用（圖像將消失）。在Firefox甚至在Internet Explorer中，它似乎工作正常。Chrome圖像轉換（圖像消失）

這裏是發生了什麼樣子。在Chrome中，當你將鼠標懸停在圖像上時，圖像將消失。在任何其他（非網絡套件我假設）瀏覽器它的工作沒有問題。

沒有人有解決方案/此問題的解釋？

https://jsfiddle.net/pnvkeugs/

<div class="col product-block"> 
    <div class="image"> 
    <a class="img" a="#"> 
     <img src="http://www.ecdevelopment.org/wp-content/uploads/2015/04/hippie-flower.jpg" alt="Example" /> 
    </a> 
    </div> 
</div>

的CSS：

.product-block:hover { 
    box-shadow: 0 0 4px #D4D4D4; 
} 
.product-block:hover .image .img img { 
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2); 
    -ms-transform: scale(1.2); 
    -o-btransform: scale(1.2); 
    transform: scale(1.2); 
} 
.product-block .image { 
    display: block; 
    margin-bottom: 0px; 
    position: relative; 
    text-align: center; 
    border-left: 1px solid #d4d4d4; 
    border-right: 1px solid #d4d4d4; 
    overflow: hidden; 
} 
.product-block .image .img { 
    transform: rotateX(0deg) rotateY(0deg); 
    -webkit-transform: rotateX(0deg) rotateY(0deg); 
    -moz-transform: rotateX(0deg) rotateY(0deg); 
    -webkit-transform: rotate(0); 
    -moz-transform: rotate(0); 
    -ms-transform: rotate(0); 
    -o-transform: rotate(0); 
    transform: rotate(0); 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -webkit-transition: all 0.6s ease-in-out; 
    transition: all 0.6s ease-in-out; 
} 
.product-block .image .img img { 
    -webkit-transition: all 0.6s ease-in-out; 
    transition: all 0.6s ease-in-out; 
}

來源

2015-09-21 Jasper Briels

更新你的CSS補充：

a.img { 
    display: inline-block; 
    vertical-align: top; 
}

其實我直接用內聯塊爲父母（div.image）代替使用花車。

更新的jsfiddle：https://jsfiddle.net/Paf_Sebastien/pnvkeugs/1/

來源

2015-09-21 10:02:17 Sebastien

由於塞巴斯蒂安，似乎工作：d –

Chrome圖像轉換（圖像消失）

回答

相關問題