Lỗi di chuột Microsoft Edge

Question

Tôi gặp lỗi trong Microsoft Edge. <div> khi di chuột có transform: scale(1.5); với transition: transform 1s;. Nhưng khi bạn di chuyển con trỏ đến div, chờ 1s, di chuyển ra ngoài và sau đó di chuyển nhanh đến div, tỷ lệ của div bị hỏng và quá trình chuyển đổi biến mất. Có cách nào để khắc phục hành vi này không? Đây là fiddle.

div { 
 
    background-color: green; 
 
    transition: transform 1s; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
div:hover { 
 
    transform: scale(1.5); 
 
}

<div></div>

Answer 1

Để khắc phục vấn đề chuyển đổi này Edge sử dụng transition-timing-function bất động sản, điều này sẽ khắc phục vấn đề bằng cách ảnh hưởng đến quá tốc độ làm cho nó chậm hơn trên bắt đầu và kết thúc. Sau đó bạn có thể thiết lập chiều dài hình ảnh động (tính bằng giây) để làm cho nó với tốc độ ban đầu với transition-duration

div { 
 
    background-color: green; 
 
    transition: transform 1s; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
div:hover { 
 
    transform: scale(1.5); 
 
    transition-timing-function: ease-in-out; 
 
}

<div></div>

EDIT: Nếu bạn nhận thấy một cách cẩn thận có một số loại của một trục trặc với chiều rộng thay đổi trên di chuột, nhưng nhìn chung quá trình chuyển đổi suôn sẻ trên Edge