styled-components v4 -> v5 upgrade causing twitching on icomoon fonts
Is anyone else experiencing twitching with styled-components v5? To give you an idea, we have
<Span> <Title>
The <Span> disappears for a split second when opening Accordions. Is there anything in V5 that would cause spans to disappear for a split second? There is no change to the DOM
We use to use styled-components 4.2.0 and upgraded to 5.3.3
Environment
Latest styled-components
Reproduction
I am unsure how to reproduce it, but all I am doing is opening one of our Accordions and it's causing elements across the page to twitch. Looking at the DOM, I do not see re-renders of the areas that are twitching so I am unsure what it is?
Steps to reproduce
For us, we upgrade to styled-components v5 and opening accordions causes twitches across the page
Expected Behavior
No change in behaviour from upgrading to v4
Actual Behavior
If I look at the <Span> in question that's flashing/twitching, the DOM remains the same, but if you are under the CSS via under Google Chrome, it flashes for a split second.
Does styled-components re-apply CSS somehow and that behaviour changed?
This is the smallest test I could fine that makes it twitch/break:
function Icon({ kind }) {
return (
<Span className={" icon-" + kind} > </Span>
);
}
Where the span is referencing an 'icomoon' font.
Do you know what behaviour changed to cause icomoon fonts to twitch on v5?
I've confirmed this starts on v5.0.0 and did not happen on v4.4.1
I cannot for the life of me understand how styled-components is causing this bug. I replaced <Span> (which is a styled-component) to a regular React <span> and it's still happening.
Perhaps this is a change in the Theme Handler or something higher up? Anyone else noticing flashes for <span> which reference icon fonts?
Also it appears to happen only when I open up my Accordion so I am unsure if that's triggering something that interacts with styled-components in a different way in V5, super odd.
@arianitu If you aren't seeing this in Firefox, then you might be running into https://bugs.chromium.org/p/chromium/issues/detail?id=1216451
(I don't have any information on how to work around it, unfortunately.)