Bardzo powolne cienie CSS3 w Chrome

Question

Opracowuję aplikację specjalnie dla nowoczesnych przeglądarek i bardzo intensywnie wykorzystuję właściwość box-shadow.

Do niedawna było to absolutnie w porządku we wszystkich przeglądarkach obsługujących. Jednak około miesiąca temu podczas testowania w Chrome zauważyłem, że przewijanie było "ekstremalnie" powolne, do tego stopnia, że ​​prawie nie można go było używać.

W ciągu ostatniego miesiąca próbowałem wyskakiwać ze skryptów i mieszać z moją strukturą html, wszystko, co można wymyślić, aż w końcu znalazłem przyczynę.

Przy wyłączonym oknie cienia/webkit-box-shadow na wszystkich elementach, dla których został ustawiony, problem znika.

To, co wydaje mi się dziwne, to fakt, że sprawdziło się w Chrome przed około miesiącem. Nawiasem mówiąc przewijanie w Safari w wersji Windows jest w porządku, choć trochę wolniejsze niż IE/Opera i Firefox.

Czy to znany problem? Czy ktoś ma obejście tego problemu?

Co jest jeszcze jedną metodą na powielenie tego samego efektu bez użycia właściwości CSS3?

Answer 1

Było zgłoszenie błędu otwierane i zamykane w Webkit ubiegłym roku:

CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?

Wydaje Chrome ma otwartą błąd w starszej wersji:

http://code.google.com/p/chromium/issues/detail?id=95164

Airbnb omówiła Problem ten został ostatnio rozwiązany i faktycznie zmieniono jego ostateczny projekt z tego powodu:

http://nerds.airbnb.com/box-shadows-are-expensive-to-paint

Istnieje grupa osób, które ostatnio zyskały zainteresowanie programowym testowaniem wydajności CSS.Oto bookmarklet można użyć, aby rozpocząć własne badania:

http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

W międzyczasie, masz rację, że włamanie border-image jest rozwiązaniem. Sprawdź tutaj:

Scroll Lag with CSS3 box-shadow property?

Answer 2

To może nie być szczególnie box-shadow, może coś innego w twojej aplikacji zużywa o wiele za dużo zasobów, a box-shadow jest właśnie wisienką na wierzchu.

Mimo to mogę potwierdzić, że box-shadow na zbyt długich lub dużych elementach powoduje problemy z wydajnością. Pracuję dla pewnego kreatora formularzy typu drag'n'drop i próbowałem ustawić opcję box-shadow na div o wymiarach 900 x 9 x 9 x 9 pikseli, a przewijanie zaczęło się od razu opóźniać. Nasza jest bardzo ciężka aplikacja internetowa ajax, więc inni mogą sobie pozwolić na lepsze wyniki, ale nadal uważam, że jest to dobry przykład.

Więc poszedłem do szkoły i stworzyłem zdjęcia. Myślę, że najbardziej odpowiednim sposobem uzyskania cieni obrazów bez zbyt dużego obciążenia obrazu jest posiadanie elementu o stałej szerokości.

To, co zrobiłem, to trzy plasterki obrazu. Jeden kawałek od góry do samych rogów górnych, jeden od dołu do tuż powyżej dolnych rogów i jeden cienki kawałek od środka, który użyłem na div jako obraz tła z powtarzaniem-y, dzięki czemu mogę dynamicznie zmieniać wysokość div dopasuj stronę użytkowników.

Można pokroić jeszcze więcej, aby zmieściło się w dowolnym polu, ale staje się ono zbyt duże (co najmniej 5 dodatkowych obrazów i 8 dodatkowych elementów div, aby być precyzyjnym) dla imo box-shadow.