2010-09-17 6 views
5

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> 

Trả lời

13

Tôi đã tự giải quyết được vấn đề.

Các giải pháp rất đơn giản: chỉ cần đảm bảo yếu tố này được thu nhỏ lại kích thước ban đầu để bắt đầu với:

-webkit-transform: scale(1); 

Có một mẹo để thực hiện, mặc dù. Nếu bạn, như tôi dưới đây, thêm một lớp học để một phần tử bằng cách #ID chọn, #ID có ưu tiên cao hơn lớp và nó sẽ không hiển thị trừ khi bạn nói với trình duyệt mà điều quan trọng là

-webkit-transform: scale(2) !important; 

Một thay thế cách để giải quyết điều này là không chọn phần tử bởi #id nhưng theo lớp (.block) hoặc theo phần tử (div). Bất kỳ thứ gì có mức độ ưu tiên thấp hơn id.

Giải pháp sau:

<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; 
    -webkit-transform: scale(1); 
    } 

.zoom { 
    -webkit-transform: scale(2) !important; 
} 
</style> 
</head> 

<body> 
    <div id="block" onclick="className='zoom';">The Block</div> 
</body> 
</html> 
+0

Đ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! –

+0

Chỉ là những gì tôi đang tìm kiếm. Cám ơn rất nhiều. – mapr

+2

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

0

Tôi đã xem qua câu hỏi này rất muộn. Giải pháp là không sử dụng important và bằng cách thay đổi cách chọn phần tử. Điều này là do lý do bộ chọn ID gần hơn và mạnh hơn bộ chọn lớp.

#block.zoom { 
    -webkit-transform: scale(2); 
}