Chuyển tiếp Jerky CSS3 trong Firefox

Question

Tôi đang cố gắng làm một hình ảnh đơn giản mờ dần khi di chuột qua - hoạt động tốt và mượt mà trong Chrome, nhưng Firefox có chút lúng túng. Tôi đã thử làm thủ thuật backface-visibility trên vùng chứa, nhưng vẫn không có may mắn.

Bất kỳ ai có ý tưởng nào?

JSFiddle

HTML

<div class="link-box large"> 
    <div class="image"> 

     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRStwH3maKRqLU8lLOo1XbO6uZIKHRyf2PGv66H6ol5mB0kS_0r" alt=""> 
    </div> 
</div> 

CSS

.link-box .image img { transition: all .2s ease-out; width:200px; } 
.link-box.large { position: relative;} 
.link-box.large:hover .image img { opacity: .65; } 

Answer 1

đoán tốt nhất của tôi được rằng thiết lập chiều rộng của hình ảnh để 200px và rời khỏi chiều cao không xác định đang gây ra trình duyệt để tính toán chiều cao của hình ảnh. Nếu chiều cao tính toán cho một số nguyên đẹp thì đó không phải là vấn đề. Nếu chiều cao tính bằng một số thập phân, nó có thể là nguyên nhân của vấn đề.

Trong trường hợp này, kích thước tự nhiên của hình ảnh là 275px x 183px.

Bằng cách thay đổi chiều rộng của hình ảnh thành 200px, bạn sẽ thu nhỏ hình ảnh về 72.727272 ...% kích thước tự nhiên của hình ảnh.

275/200 = 0,727272 ... Hoặc nếu bạn thích các phần phân đoạn: 275 (8/11) = 200

Bây giờ chạy phương trình tương tự trên sản lượng height:

183 (8/11) = 133.090909 ...

Có vẻ như, dưới sự hoạt động bình thường của mọi thứ, một phần pixel bị cắt, nhưng trong quá trình chuyển đổi, một phần pixel không bị cắt và hình ảnh bị biến dạng một chút để hiển thị một phần pixel trong cùng một chiều cao.

cắt xuống để 133px:

Không cắt và hơi uốn cong:

---

Bây giờ chúng ta có một giả thuyết tốt về những gì gây ra vấn đề, về các giải pháp:

Bạn có thể mã hóa cứng chiều cao của hình ảnh:

Working Example

.link-box .image img { 
    transition: all .2s ease-out; 
    width:200px; 
    height: 133px; /* manually set the height */ 
} 

Hoặc nếu bạn không muốn cứng mã chiều cao, bạn cũng có thể khắc phục vấn đề với một anti-alias hack, chỉ cần thêm một hộp bóng.

Working Example

.link-box.large:hover .image img { 
    opacity: .65; 
    box-shadow: 0 0 0 #000; /* add a non-visible box-shadow */ 
} 

Hoặc nếu bạn lo ngại về khả năng tương thích qua trình duyệt của việc sử dụng một hộp bóng, bạn cũng có thể sử dụng một biên giới trong suốt:

Working Example

.link-box .image img { 
    transition: all .2s ease-out; 
    width:200px; 
    border: 1px solid transparent; /* add transparent border */ 
} 

Answer 2

Làm việc tốt trên Firefox của tôi.

Dù sao, bạn có thể thử thêm một số thuộc tính đặc biệt để chuẩn bị trình duyệt để chuyển đổi và thực sự hiển thị phần tử có thể chuyển đổi.

Như một thuộc tính là transform: translate3d(0,0,0);

Như thế này:

.link-box .image img { 
    transition: all .2s ease-out; 
    width:200px; 
    transform: translate3d(0,0,0); 
} 
.link-box.large { position: relative;} 
.link-box.large:hover .image img { opacity: .65; }