Di chuyển Lag với thuộc tính hộp bóng CSS3?

Question

Tôi đã thêm một box-shadow vào một phần của trang gần đây để cho nó cùng hiệu ứng đường viền bóng được nhìn thấy trên các ứng dụng Mac OS X. Nó trông tuyệt vời, nhưng tôi nhận thấy rằng di chuyển lên và xuống trên trang làm cho nó tụt hậu. Tôi thường chỉ nhìn thấy điều này trên các trang có hình ảnh nền khó chịu và tấn hình ảnh và video nhúng được dán trên tất cả (ho MySpace ho). Ban đầu tôi quyết định sử dụng hộp bóng vì tôi thấy rằng nó sẽ loại bỏ sự cần thiết phải sử dụng một hình ảnh, mà sẽ loại bỏ bất kỳ khả năng di chuyển lag.

Tôi biết rằng CSS3 vẫn còn mới, nhưng đây có phải là lý do cho sự chậm trễ không? Cái bóng là phần mềm được render hay gì đó? Khi tôi áp dụng bóng hộp cho các phần tử nhỏ hơn, nó không bị lag. Tôi chỉ tự hỏi liệu có ai khác đã trải nghiệm điều này không.

Tôi chỉ cố gắng nó trên trang đầu Stack Overflow, trên #content div sử dụng Firebug với một thiết lập của:

-moz-box-shadow: 1px 1px 10px; 

Và tôi đã nhận thấy một số lag cuộn sau đó. Tôi đang sử dụng Firefox 3.5.

Câu hỏi của tôi là, một số lựa chọn thay thế để sử dụng thuộc tính này là gì nếu tôi muốn thêm đường viền kiểu Mac OS X vào một phần của trang?

Trên một lưu ý phụ, có ai biết nếu có thể áp dụng bóng hộp chỉ cho phía trên, bên trái và bên phải của phần tử chứ không phải dưới cùng? Tôi đã thử 1px -1px 10px nhưng nó vẫn hiển thị bóng ở phía dưới. Nếu tôi tiếp tục giảm độ lệch thứ hai, nó cuối cùng sẽ loại bỏ bóng tối ở phía dưới nhưng sau đó bóng trên cùng giờ tối hơn và lớn hơn.

Và vâng, tôi đã thấy các bài viết trên hộp bóng tại địa chỉ:

• CSS3 Info
• fredericiana's blog

Answer 1

Tốt nhất là nên sử dụng -moz-border-image để thay thế. Điều đó sẽ giải quyết cả hai vấn đề của bạn.

Ví dụ: bạn có thể sử dụng hình ảnh như thế này, http://i28.tinypic.com/2njzkt1.png, kết hợp với CSS như thế này

-moz-border-image: url(shadow.png) 10/10px; 

để tạo bóng của bạn. Và kể từ khi bạn đang sử dụng một hình ảnh, bạn có thể để lại bóng dưới cùng là tốt, nếu bạn muốn.

---

Bạn sẽ không thể xóa bóng từ dưới cùng bằng cách sử dụng -moz-box-shadow; nó không được gọi là "hộp bóng" cho không có gì. Nó áp dụng một bóng cho toàn bộ hộp. Bạn không thể chỉ định một bóng cho mỗi bên riêng biệt như với border, nói. Điều tốt nhất bạn có thể làm là fiddle xung quanh với vị trí, làm mờ và lây lan của bóng tối. Nhưng điều đó chắc chắn dẫn đến một cái bóng tối hơn ở phía đối diện.

Tôi cũng nhận được độ trễ hộp bóng khi tôi thử trên Stackoverflow. Nó ảnh hưởng đến hiệu suất trên Safari cũng như khi tôi thử -webkit-box-shadow, mặc dù nó không đáng chú ý như trong Firefox. Hiệu suất sẽ hy vọng cải thiện trong tương lai, nhưng tôi cho rằng bóng sẽ luôn có một số tác động kể từ khi tôi biết nó là phần mềm được hiển thị.

Answer 2

Điều này đã được khắc phục trong webkit kể từ hai ngày trước. :)

https://bugs.webkit.org/show_bug.cgi?id=22102

Bạn có thể chọn crôm hàng đêm để dùng thử.

Tôi đã xem FF3.6 và FF4 và không thấy hiệu suất cuộn khủng khiếp ở đó, vì vậy nó cũng có thể được giải quyết ở đó.

Answer 3

#shadow { 
-moz-border-image: url(img.png) 10/10px; #Firefox under v15.0# 
-webkit-border-image: url(img.png) 10/10px; #Safari, Chrome under v15.0, Android & iOS# 
-o-border-image: url(img.png) 10/10px; #Opera under v15.0# 
border-image: url(img.png) 10/10px; #IE v11+, other new Browser# 
} 

Phiên bản trình duyệt chéo cho trình duyệt cũ và mới. Simple img: http://i28.tinypic.com/2njzkt1.png

phong cách : cố định cho hình ảnh quá quá tải trình duyệt Biến

Answer 4

Vấn đề này vẫn còn tồn tại trong Chrome dành cho Android như của ngày hiện tại. Một số combo hộp bóng dẫn đến hiệu suất cuộn kém. Trong trường hợp của tôi, việc xếp chồng hai bóng đổ vào hộp (ví dụ: đầu/cuối) dẫn đến sự cố được mô tả. Giải pháp duy nhất tôi có thể cung cấp là làm cho hộp bóng tối phức tạp hơn và thử lại ... điều đó có tác dụng đối với tôi. Đó là không đạt yêu cầu nhưng thay vào đó u cũng có thể sử dụng giải pháp biên giới hình ảnh hoặc loại bỏ hoàn toàn hộp bóng bị ảnh hưởng. Hy vọng điều này sẽ được khắc phục sớm, cuối cùng. Btw Phiên bản Android của Firefox không còn vấn đề nữa (đối với css3 của tôi). Hơn nữa các phiên bản máy tính để bàn của cả hai trình duyệt không bị ảnh hưởng trong trường hợp của tôi.