iPad/ios6 không hiển thị hình nền png

Question

Trên ios5, trang web tải tốt và có vẻ chính xác.

Vì ios6 một phần trong trang web của tôi sử dụng hình ảnh png làm nền bắt đầu hiển thị trên iPad nhưng sau đó nền chỉ chuyển thành màu đen không có lý do rõ ràng (lưu ý tất cả các phần khác ở đúng màu).

mã:

<section id="showcase"> 
    <section class="container"> 
    <img src="images/usp.jpg" alt="USP Screen" id="screen"> 

    <h2>title</h2>  

    <p>the text.</p> 

    <p>The text.</p> 
    </section></section> 

CSS:

#showcase   { background: url(../images/showcasebg.png) repeat-x #ededed; height: 600px; position: relative; top: 87px; } 
#showcase h2  { float: left; max-width: 422px; font-family: 'Lobster', cursive; font-size: 36px; margin-top: 20px; } 
#showcase p   { float: left; max-width: 422px; margin-top: 20px; } 

Answer 1

Tôi không chắc chắn nếu nó có liên quan trực tiếp, nhưng tôi đã có một vấn đề tương tự đêm qua. Tôi đã sử dụng URL tương đối cho hình ảnh và thấy rằng iOS6 đã mã hóa khoảng trắng trong đường dẫn hình ảnh là% 2520 thay vì% 20. Đây là một vấn đề đối với tôi vì tôi đang xem tài nguyên hình ảnh trong chế độ xem web trong ứng dụng trên trình mô phỏng, do đó đường dẫn đến tài nguyên được trình mô phỏng cung cấp có khoảng trống trong đó. Đây không phải là vấn đề trên thiết bị, nơi không có dấu cách trong đường dẫn.

Tôi tìm thấy thanh tra từ xa mới (được đề cập ở đây: http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers) rất hữu ích trong việc xác định những gì đang diễn ra.

Answer 2

Vấn đề tương tự tại đây. Tất cả các trang trong phần công việc của trang web của tôi (http://paulcremoux.com/en/trabajo/) có một png dài. Thường thì hình ảnh ngừng tải trước khi chúng hoàn tất; thời gian khác họ tải và sau đó loại vụ tai nạn. (Bạn phải xem xét một vài trang vì nó có vẻ hoạt động tốt lúc đầu.)

Chỉ xảy ra trên ios6.

Answer 3

Chúng tôi gặp sự cố tương tự.

Chúng tôi vừa mở PNG trong PhotoShop và lưu lại nó, và sau đó nó hiển thị không sao. Chúng tôi đã không thay đổi hồ sơ màu sắc hoặc bất cứ thứ gì như thế - chỉ cần mở nó ra, để lại tất cả các thiết lập giống nhau, và lưu nó một lần nữa, và sau đó nó là tốt.

Chúng tôi có một số hình nền PNG trên trang web của chúng tôi, nhưng chỉ có hai PNG cụ thể không được hiển thị chính xác. Vì vậy, chúng tôi nghĩ rằng có lẽ hai người đặc biệt đã được lưu với trục trặc hoặc một cái gì đó khi họ lần đầu tiên được tạo ra.

Ai biết được. nhún vai

Answer 4

Chỉ gặp vấn đề tương tự, trong Safari của iOS6. Hình nền lặp lại x .PNG xuất hiện màu đen. Dưới áp lực nặng nề, tôi đã lưu nó thành .JPG và giải quyết vấn đề kết xuất.

Answer 5

gì làm việc cho tôi là không giống nhau cho tất cả:

• Một số hình ảnh nó làm việc bằng cách loại bỏ xen kẽ
• Một số hình ảnh tôi loại bỏ các xen kẽ nhưng sau đó đã phải gỡ bỏ tính minh bạch cũng và điều này dường như để khắc phục sự cố
• Tôi đã cố gắng làm lộn xộn với độ rộng nhưng tôi không nghĩ rằng đó là một trong hai.

Chỉ cần kinh nghiệm của tôi

Answer 6

tôi đã chạy vào vấn đề này cũng vào một trong các trang web của chúng tôi. Tôi đã có trang web dành cho thiết bị di động sử dụng hình ảnh PNG nền cho gradient, xuất hiện dưới dạng các thanh màu đen trên iOS6 (Ứng dụng Chrome và Safari).

tôi sửa chúng một cách dễ dàng bằng cách tái lưu hình ảnh cho web như

• là ít nhất 10px rộng
• lưu chúng dưới dạng phi chằng chịt PNG

Điều này ngay lập tức khắc phục được sự cố của tôi.

Answer 7

Chỉ gặp sự cố tương tự như vậy, hãy lưu lại .png với việc xóa xen kẽ đã giải quyết được sự cố.

Answer 8

Tôi vừa gặp phải điều này trên máy chủ web. Giải pháp là thay đổi PNG từ độ chính xác số nguyên 8 bit thành 32-bit. Dường như iOS không thể xử lý đúng 8 bit; Tôi không biết về 16-bit. Tôi nghĩ Photoshop có thể đã làm điều này tự động do độ phức tạp thấp của hình ảnh (một gradient đơn giản). Thật dễ dàng để sửa lỗi trong GIMP: Image -> Precision -> 32-bit integer

Answer 9

Thay đổi kích thước img của tôi dường như hoạt động nhưng một số vấn đề lạ sẽ xảy ra khi thu phóng ... Cuối cùng, giải pháp tốt nhất cho tôi là lưu hình ảnh thành jpg.