Bug: Screen blinks when doing click on style variation cards from Assembler and Design Picker

[miksansegundo]

What

When users click on the style variation cards on the Assembler and Design picker, the whole screen blinks.

https://github.com/Automattic/wp-calypso/assets/1881481/e0223174-70e8-43dc-b8e0-7dac0bd5e5a4

https://github.com/Automattic/wp-calypso/assets/1881481/330fe5d4-9a76-4ce7-80eb-f8163c35ed2d

Why

It's not looking good.

How

Look for a bug related to the component https://github.com/Automattic/wp-calypso/tree/trunk/packages/global-styles

[miksansegundo]

@arthur791004 found out that it's caused by Grammarly and it's related to the CSS animation for the color and style variation screens.

https://github.com/user-attachments/assets/9e245160-15f0-4417-ba2c-e1d854c4cf09

A workaround is in https://github.com/Automattic/wp-calypso/pull/92642

[arthur791004]

https://github.com/Automattic/wp-calypso/pull/92642 prevents the screen blinks by disabling the animation. However, it would be better to prevent Grammarly from appending the element as it causes the re-render. For example, setting pointer-events: none; to the iframe.

[miksansegundo]

Moving this to the Up Next column. cc: @taipeicoder as I understood that this task is not a priority for this week

[taipeicoder]

Closing due to the issue being stale, and no current plans to take further action on it.