Chuyển ảnh/nhảy sau khi hiệu ứng chuyển tiếp CSS với biến đổi tỷ lệ trong Firefox

Question

Tôi gặp sự cố trong số Firefox phiên bản trình duyệt 34 (hệ thống: Windows 7, chiều rộng màn hình: 1600px). Tôi đã tạo hiệu ứng với việc phóng to hình ảnh (trong một số vùng chứa) sau khi di chuột lên nó. Tôi đang sử dụng chuyển đổi : tỷ lệ (1.1) với chuyển đổi : chuyển đổi 0.3s dễ dàng-trong-ra. Nhưng khi tôi di chuột vào hình ảnh, và sau khi phóng to hình ảnh .. nó làm cho một số thay đổi 1px kỳ lạ. Một số hiển thị lỗi trình duyệt, nhưng tôi hy vọng rằng một số sửa chữa hiện có cho nó. Hãy giúp tôi!

Quan trọng nhất định nghĩa CSS:

figure { 
    display: block; 
    overflow: hidden; 
    position: relative; 
    backface-visibility: hidden; 
} 
figure img { 
    width: 100%; 
    transform: scale(1); 
    transition: transform 0.3s ease-in-out; 
    } 
figure:hover img { 
    transform: scale(1.1); 
} 

..và một phần của HTML:

<figure> 
    <img class="img-responsive" src="http://lorempixel.com/600/400/fashion/7"> 
</figure> 

---

mẫu với lỗi này là trực tuyến tại đây: http://templates.silversite.pl/test/jumpingimg/

Tôi cũng thấy rằng ai đó có thể sửa chữa nó, nhưng tôi không biết làm thế nào, ví dụ hộp "công việc gần đây của chúng tôi" trên http://demo.qodeinteractive.com/bridge/

Answer 1

Mở liên kết mà bạn cung cấp, http://demo.qodeinteractive.com/bridge/, nếu bạn thực sự đi ở đây: http://demo.qodeinteractive.com/bridge/portfolio/gallery-style-condensed/two-columns-grid/, bạn có thể thấy rằng, một khi nhìn vào các công cụ dev, mà họ áp dụng một lề của "1px" trên bên trái/bên phải

.projects_holder.hover_text.no_space article .image img { 
    margin: 0 1px; 
} 

Nếu bạn tắt kiểu đó, bạn sẽ thấy hình ảnh di chuyển khi bạn mô tả khi di chuột lên hình ảnh.

Vì vậy, CSS của bạn cho hình ảnh nên là:

figure img { 
    width: 100%; 
    transform: scale(1); 
    transition: transform 0.3s ease-in-out; 
    display: block; /* (or inline-block) */ 
    margin: 0 1px; 
} 

Answer 2

Tôi đã có một vấn đề tương tự về dự án của tôi. Tất cả hình ảnh đều position: absolute; và chuyển cái nhìn như thế:

figure img{ 
    transform: translate(-50%, 50%) scale(1); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

figure img:hover{ 
    transform: translate(-50%, 50%) scale(1.1); 
} 

tôi thay thế mỗi scale với scale3d và giải quyết vấn đề của tôi. Các phong cách thức giống như thế:

figure img{ 
    transform: translate(-50%, 50%) scale3d(1, 1, 1); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

figure img:hover{ 
    transform: translate(-50%, 50%) scale3d(1.1, 1.1, 1); 
} 

hy vọng rằng sẽ khắc phục vấn đề của bạn