Ich habe zwei Overlays, die sich gegenseitig überlappen und der überlagerte Teil wird gemischt, indem man den Mix-Blend-Modus multipliziert. In Chrome wird der Effekt angewendet, aber es gibt ein seltsames Flackern des Divs mit dieser Eigenschaft. was ist der Grund für dieses Flackern und wie es gelöst werden kann. Ich habe es auf Firefox getestet, es läuft gut, aber nicht in Chrom.!
Das obige Bild ist, sobald die Animation vorüber ist und sobald sie fertig ist, beginnt das linke div kontinuierlich zu blinken.
%Vor% Ich hatte dieses Problem und stellte fest, dass es anscheinend durch die Kombination von Deckkraft mit Mix-Blend-Modus verursacht wurde. Die Lösung bestand darin, entweder eine Regel von will-change: opacity oder alternativ transform: translateZ(0) zum übergeordneten Element des übergehenden Elements hinzuzufügen. Entweder einer von denen, aber ich denke, dass die Option will-change vorzuziehen ist (da es weniger hacky ist).
In jedem Fall denke ich, dass der Effekt darin besteht, das Bild dieses Elements an die GPU zu übergeben (oder zumindest den Browser zu warnen, dass es neu gezeichnet werden könnte), was das Problem zu beheben scheint.
Kredit wegen dieses Problems im Chromium-Bug-Tracker dafür, mich in der richtige Richtung.