Văn bản mờ trong trình duyệt Iphone 4 khi tải nội dung động

Question

Tôi đang sử dụng thư viện Jquery/Jqtouch cho trang web tương thích với iPhone. Tôi bây giờ bị mắc kẹt với một vấn đề chỉ trong iPhone 4 (không phải trong 2g, 3g hoặc 3gs), nơi văn bản trở nên mờ trên một kịch bản cụ thể. Dưới đây là cách nó xảy ra

1. Trang web có một ngăn chứa div chung.

   <div id="container"></div> 
   

2. Vùng chứa được điền nội dung động dựa trên hành động của người dùng. Dưới đây là chức năng thực hiện điều đó.

   function loadPage(url, section, callback) { 
       $('#container').empty(); 
       $('#container').load(url + ' ' + section, loadComplete(section)); 
   } 
   

3. Một cuộc gọi mẫu để các chức năng trên

   loadPage("Data.htm", "#Friends", null); 
   

4. về cơ bản eveything hoạt động tốt, ngoại trừ trên một kịch bản mà lượng dữ liệu trên thùng là rất lớn (tức là chiều cao #container tăng lên 1500px + không thể dự đoán được). Bây giờ nếu tôi thay thế bằng dữ liệu nhỏ hơn cho các tab khác nhau trên cùng một vùng chứa thì văn bản sẽ bị mờ. Kèm theo là hình ảnh

http://i.stack.imgur.com/XE9q4.png

Có ai đi qua kịch bản này. Cảm ơn trước.

Answer 1

Yếu tố đồ họa phải được "căn chỉnh" với các pixel trên màn hình; tọa độ phải luôn được biểu diễn dưới dạng giá trị tích phân và không phải là giá trị thả nổi. Nếu không, công cụ hiển thị subpixel của GPU sẽ làm cho nó bị mờ, không phải là vấn đề với hoạt ảnh nhưng chắc chắn là có hình ảnh tĩnh.

Trong SDK gốc, chúng tôi phải đảm bảo mọi thứ được căn chỉnh (chẳng hạn như sử dụng CGRectMakeIntegral()).

Vì bạn đang sử dụng khung web nên khó có thể biết chính xác cách khắc phục sự cố, nhưng tôi sẽ cố gắng điều chỉnh kích thước của bạn thành kích thước chính xác và không để khuôn khổ hình dung ra.

Answer 2

Bạn tải nội dung nào? Hình ảnh? Bản văn? Có giới hạn nội bộ về kích thước hình ảnh cho iPhone (khoảng 4 Megapixels hoặc hơn). Có vẻ như điện thoại đang cố gắng giảm tải bộ nhớ của trang web của bạn và giảm độ phân giải thành các giá trị không phải võng mạc.

Tôi không thể nói nhiều hơn nếu bạn không đăng mã.

Answer 3

Đây là ảnh chụp trong bóng tối, nhưng bạn đã kích hoạt kích thước của mình bằng cách sử dụng các giá trị pt cho các phần tử khối và em cho văn bản của mình?

IPhone4 thay đổi kích thước nội dung của bạn để phù hợp với màn hình Retina có độ phân giải cao hơn (so với iPhone cũ) và đôi khi tôi nhận thấy mờ khi sử dụng giá trị pixel cho chiều cao khối, chiều rộng, cỡ phông, v.v.

Rất khó chẩn đoán mà không thấy mã thực, nhưng có thể là vấn đề.

Answer 4

tôi đã có thể khắc phục điều này bằng cách áp dụng các thiết lập tương tự để giảm rung trên phần tử trong các trình duyệt webkit:

-webkit-perspective: 1000; 
-webkit-transform-style: preserve-3d; 
-webkit-backface-visibility: hidden; 

Answer 5

Trong trường hợp của tôi đó là CSS

-webkit-transform: translateZ(0); 

áp dụng cho một trong những các yếu tố trong cơ thể. Như Ariejan đã nói, nó loại bỏ thuộc tính chuyển tiếp sửa lỗi nó.

Answer 6

body{ text-rendering: optimizeLegibility} 

thể giải quyết vấn đề này, giá trị một shot nếu bạn đã không bao gồm nó đã

Answer 7

Thử đóng tất cả các ứng dụng đang chạy của bạn bên cạnh safari. Nghe có vẻ điên rồ nhưng chúng tôi có cùng một vấn đề trên ipad và nó dường như đã hết bộ nhớ tại một số điểm. Đóng tất cả các ứng dụng sẽ dừng nó lại. Điều khác mà dường như làm cho một sự khác biệt là -webkit-overflow-scrolling: touch, nếu nó không có tài sản này thì nó dường như không có vấn đề mô tả.

Answer 8

Đôi khi, mờ văn bản có thể là nguyên nhân của Plugin iScroll. Bạn đã sử dụng?

Cố gắng bình luận

trnOpen = 'translate' + (has3d ? '3d(' : '('), 
trnClose = has3d ? ',0)' : ')',