ios 8 hộp bóng trên iPhone 6 Plus

Question

Tôi gặp sự cố hiển thị với thuộc tính hộp bóng đặc biệt trên iPhone 6 plus. Nếu tôi thêm thẻ meta width=device-width, bóng hộp sau không được hiển thị ở tất cả:

-webkit-box-shadow: 1px 1px 5px 5px #a8a8a8; box-shadow: 1px 1px 5px 5px #a8a8a8;

Nếu tôi không sử dụng các thẻ meta, hộp bóng "kỳ diệu" biến mất nếu bạn phóng to vào trang. Bạn có thể hiểu được điều này ở đây:

http://jsfiddle.net/b6aaq57z/3/

Đây dường như là một iPhone cụ thể 6 cộng với lỗi. Trên các phiên bản iPhone cũ hơn chạy cùng một phiên bản iOS (8.0.2), các hộp bóng đang hoạt động đúng cách.

Có ai có giải pháp không?

Answer 1

Hãy thử sử dụng -webkit-apperance: none;

Bạn có thể thêm video này vào thiết lập lại toàn cầu của bạn để loại bỏ tất cả các vấn đề với điều này. Tôi sử dụng:

*, *:before, *:after { 
    -webkit-appearance: none; 
} 

Tôi cũng có đặt lại kích thước hộp trong đó.

Answer 2

Bạn có thể thêm bán kính đường biên: 1px vào div. Nó khắc phục sự cố hộp bóng trong iphone 6+ và các thiết bị retina khác

.box-shadow{ 
-webkit-box-shadow: 1px 1px 0.25em 0.25em #a8a8a8; 
box-shadow: 1px 1px 0.25em 0.25em #a8a8a8; 
border-radius:1px;}