Safari web inspector element flickering

Question

I'm experiencing a strange safari bug. The bug is visual, some styles are not showing up, but when I inspect in the web inspector I notice that the affected elements are flickering.

It appears that they are mounting and unmounting from react but this is not the case as the js inspector shows nothing is happening.

Instead it shows that styles are invalidated and then recalculating in a loop.

What might cause this?

Screenshots attached.

Thanks!

Answer 1

The Problem

This is caused by a common CSS reset and a somewhat recent change in how Webkit renders pseudo elements. You probably have something like this somewhere in your css.

*:before, *:after {
  box-sizing: border-box;
}

Any property will trigger this bug, but box-sizing is pretty common since it's part of bootstrap's scaffolding reset.

The Fix

Remove all style rules for *:before, *:after. You can't use the cascade to override those styles since any style rule for this selector will trigger the bug.

Why It Happens

I believe that properties assigned to *:before, *:after cause recent versions of Webkit to evaluate these pseudo elements for all elements whenever a repaint occurs. You can reproduce this effect on any website by using the web inspector to add any style rule to the *:before, *:after selector. When you resize, repaints will trigger and you'll see :before and :after flicker in and out of existence, and elements without children will briefly show an expand triangle as the browser evaluates pseudo elements.

On pages with a large number of elements this causes performance problems in Webkit browsers since it effectively triples the number of elements which are evaluated during a repaint.