styled-components icon indicating copy to clipboard operation
styled-components copied to clipboard

styled-components v4 -> v5 upgrade causing twitching on icomoon fonts

Open arianitu opened this issue 4 years ago • 5 comments

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

arianitu avatar Dec 15 '21 19:12 arianitu

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?

arianitu avatar Dec 15 '21 19:12 arianitu

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?

arianitu avatar Dec 15 '21 19:12 arianitu

I've confirmed this starts on v5.0.0 and did not happen on v4.4.1

arianitu avatar Dec 15 '21 20:12 arianitu

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 avatar Dec 15 '21 20:12 arianitu

@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.)

agriffis avatar Dec 29 '21 12:12 agriffis