Trong trang HTML bên dưới, tôi đang chia tỷ lệ khối với -webkit-transform
. Biến đổi quy mô khối từ kích thước ban đầu của nó đến kích thước gấp đôi của nó.Vấn đề chia tỷ lệ với -webkit-biến đổi với safari trên thiết bị di động trên iPad
Điều này hoạt động như mong đợi với Safari và Chrome trên OSX.
Nhưng, trên IPad (cả trình mô phỏng và thiết bị), bắt đầu mở rộng từ một điểm thay vì kích thước ban đầu của hình ảnh.
Như bạn có thể thấy trong ví dụ tôi đã đặt thẻ meta viewport
, nhưng không có gì.
Có ai có thể xác nhận đây là lỗi và có cách giải quyết khác không?
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0, minimum-scale=1.0" />
<style type="text/css">
#block {
position:absolute;
top: 0;
left: 0;
width: 200px;
height: 400px;
-webkit-transition: -webkit-transform 3s ease-out;
background-color: blue;
}
.zoom {
-webkit-transform: scale(2);
}
</style>
</head>
<body>
<div id="block" onclick="className='zoom';">The Block</div>
</body>
</html>
Điều này tạo sự khác biệt như vậy, chỉ cần thêm quy mô (1), cảm ơn bạn! –
Chỉ là những gì tôi đang tìm kiếm. Cám ơn rất nhiều. – mapr
cho tôi thêm quy mô 1 không phải là giải pháp nhưng trạng thái bắt đầu và kết thúc của tôi có một biến đổi không có -webkit trước nó. Vì vậy, bài đăng của bạn đã giúp tôi tìm ra điều này. – Mattijs