Kết hợp kích thước và dịch chuyển tiếp gây ra tình trạng lộn xộn trong Safari

Question

Khi thêm chuyển tiếp vào phần tử và thay đổi chiều rộng và/hoặc chiều cao và -webkit-transform: translate3d, hoạt ảnh chuyển tiếp bị giật. Nó xuất hiện để animate sự thay đổi chiều rộng/chiều cao đầu tiên, cũng dịch nó một phần, sau đó snaps đến vị trí dịch cuối cùng. Tuy nhiên, khi trở về kiểu gốc, hoạt ảnh mượt mà. Tôi chỉ thấy điều này trong Safari (phiên bản 8.0.6 đã được kiểm tra). Dưới đây là một số ví dụ css

#foo{ 
    width:100%; 
    height:200px; 
    border:1px solid black; 
    position:relative; 
} 

#poop{ 
    width:25px; 
    height:25px; 
    background-color:green; 
    position:absolute; 
    right:50%; 
    top:50%; 
    -webkit-transition: all 1s; 
    transform:translate3d(0,0,0); 
    -webkit-transform:translate3d(0,0,0); 
} 

#foo .blah{ 
    transform:translate3d(-100%,-100%,0); 
    -webkit-transform:translate3d(-100%,-100%,0); 
    width:100px; 
    height:100px; } 

Và một jsfiddle http://jsfiddle.net/84w4hj99/4/

Tôi đang sử dụng jquery để thêm một lớp học để các phần tử vào một nút bấm vì lợi ích của cuộc biểu tình, nhưng trước tiên nhận thấy nó khi sử dụng: di chuột đến có được hiệu quả tương tự. Tôi có thiếu gì đó ở đây hay chỉ là vấn đề với Safari và có ai biết cách giải quyết không? Cảm ơn.

Answer 1

Thử sử dụng transform: scale() thay vì thay đổi chiều rộng và chiều cao. Bạn sẽ có một quá trình chuyển đổi suôn sẻ trong trường hợp này. Tuy nhiên, bạn sẽ phải điều chỉnh các thuộc tính top & right hoặc transform: translate3D() để định vị đối tượng của bạn trở lại đúng vị trí. Nên dễ dàng.

Xem http://jsfiddle.net/y3xqak1z/