Podstawowa magia -widoku-back-visibility

Question

Chciałbym wiedzieć, dlaczego webkit-backface-visibility jest jak uniwersalna aspiryna, która rozwiązuje lub pogłębia różnego rodzaju heterogeniczne problemy, głównie związane z artefaktami i migotaniem.

Przeczytałem i rozumiem, do czego naprawdę służy backface-visibility: Kontroluje obiekty obrócone 3D są widoczne, gdy nie są zwrócone w stronę ekranu. Jest ładny, straighforward demo here

Ale jestem ciekaw, dlaczego za każdym razem mam dziwne usterki w świecie CSS całkowicie niezwiązane z 3D rotacje i ich ukryte backfaces, stosujące backface-visibility do problematycznej warstwy lub jeden z jego przodkowie zazwyczaj pomagają lub pogarszają sytuację, ale rzadko nic nie robią. Mówię o rzeczach, jak

• Animations migotanie
• stałych warstw problemy z-index
• display: none <> widocznego migotania i artefaktów
• przewijanie migotania

ciekawe i zawsze w moim skromnym doświadczeniu, backface-visibility:hidden ma tendencję do rozwiązywania problemów związanych z pozycjonowaniem, a backface-visibility:visible jest "najlepszy" do migotania. Co ciekawe, w Chrome i Safari efekty uboczne są inne, ale chłopaki są!

Pracuję w kreatorze Visual HTML, więc sytuacje były spowodowane migotaniem/artefakty są dość złożone (np. Animacja na kilku warstwach, przewijanie div za stałymi elementami, absolutne ponad ustalone z indeksem Z. ..)

Ktoś może mnie oświecić?

Answer 1

Nie jestem pewien, jaki rodzaj magii mówisz, ale istnieją pewne przypadki, w których CSSbackface-visibility nieruchomość może pomóc w promowaniu DOM elementu do warstwy tak, że przeglądarka może atutem z GPU podczas renderowania tego elementu.

UWAGA: tylko wartość hidden zostanie podwyższona do poziomu nie visible.

Istnieją również przypadki, w których ta właściwość może naprawić postrzępione krawędzie wokół elementów. Wszystko dzięki renderowaniu GPU.

Istnieje kilka innych właściwości CSS, które robią to samo, co translateZ(0) lub translate3d(0,0,0). Są to wszystkie hacki i zostaną zastąpione nową właściwością CSS will-change.

Jeśli robisz animacje z CSS, najlepszym rozwiązaniem pod względem wydajności jest zmienić tylko te CSS właściwości: transforms i opacity. Ale to jest przedmiotem zmian, a przeglądarki ciągle się zmieniają, więc może to również zmienić się w przyszłości. Celem jest sprawienie, aby każda własność CSS była tak płynna, jak to tylko możliwe (najlepiej 60FPS) podczas animowania.Wiem, że zespół Chrome pracuje nad tym bardzo ciężko, ale nie jest pewien innych sprzedawców.