Hộp thoại CSS3 gây ra sự cố cuộn (hiệu suất chậm) trên Safari 5.0.2?

Question

Xin chào,
lần này tôi gặp sự cố khá hiếm xảy ra trong Safari 5.0.2. Khi sử dụng tham số đổ bóng của CSS3, Hiệu suất của Safari kém, bạn thậm chí không thể cuộn xuống đúng hoặc tương tác như mong đợi với trang web.

Tôi có một <div class="blox"></div> trong đó có một kích thước trung bình (960x320 pixel), và đây là những thiết lập CSS liên quan của nó:

 -moz-border-radius: 4px; /* FF1+ */ 
    -webkit-border-radius: 4px; /* Saf3-4 */ 
    border-radius: 4px; /* Opera 10.5, IE9, Saf5, Chrome */ 
    -moz-box-shadow: inset 0px 0px 140px #dfe1e2; /* FF3.5+ */ 
    -webkit-box-shadow: inset 0px 0px 140px #dfe1e2; /* Saf3.0+, Chrome */ 
    box-shadow: inset 0px 0px 140px #dfe1e2; /* Opera 10.5, IE9 */ 

tôi đã cố gắng thiết lập các CSS3 hộp bóng với jQuery (.css()) nhưng kết quả là như nhau (lag). Oh và, bán kính biên giới không gây ra điều này (tôi đã loại bỏ nó bằng cách kiểm tra nó nhiều lần).

Vì vậy, có giải pháp nào cho vấn đề này không? Thành thật mà nói, tôi bị sốc khi một trình duyệt WebKit như Safari thậm chí trình bày những loại vấn đề này. Tôi biết phải có một cách, vì một số trang web sử dụng inset & đổ bóng đầu và chạy tốt trong Safari. Tôi tìm thấy một bài đăng ở đây trong StackOverflow đã đề cập đến hình ảnh hộp như là một giải pháp .. tuy nhiên, bài đăng đó khá cũ.

Tôi thực sự, thực sự đánh giá cao thời gian của bạn và bất kỳ hỗ trợ nào được cung cấp.
Cảm ơn bạn rất nhiều trước!

Chris

Answer 1

Đây là vấn đề đã biết. Theo dõi issue 22102 in the WebKit bug tracker (“-webkit-box-shadow gây ra hiệu suất cuộn/thay đổi kích thước/vẽ lại khủng khiếp”) để được thông báo khi nó được sửa.

Lưu ý rằng bóng hộp trong ví dụ của bạn có bán kính rất lớn, điều này làm cho nó trở nên tệ hơn. Điều này giải thích tại sao nó có vẻ hoạt động trên các trang web khác - chúng chỉ sử dụng bán kính nhỏ hơn.

Answer 2

Tại sao bạn bị sốc? Webkit có thể nhanh chóng trong việc triển khai các công cụ mới, nhưng nó thực hiện như vậy theo những cách cực kỳ lỗi thời nhất.

Dù sao, có vẻ như bạn đang cố gắng giả mạo một gradient với hộp bóng. Xem xét tốt hơn bằng cách sử dụng một gradient CSS3 (Moz syntax | Webkit syntax | Hỗ trợ Opera sắp ra mắt và sẽ tuân theo cú pháp moz với tiền tố -o-) hoặc nền hình ảnh.

Ngoài ra, không có thuộc tính CSS hình ảnh hộp. Họ có thể có nghĩa là border-image.