[bug] repaint & srolling performance issues

[jrson83]

Describe the bug

When enabling paint flashing and scrolling performance issues in dev tools and checking the iframe, it rerenders on scroll.

This is happening on both storylite app and story in new tab.

The issue for Story in new Tab is caused by overflow-x: hidden; applied to html, body, #root in storylite-iframe.css.
Removing the attribute, which is not necessary fixes the scrolling and repaint issue.

Update:
The issue for Story in new Tab is already fixed by #63.

For the app iframe, the issue is caused either by storylite-canvas-root or transition on iframe & canvas elements.
I'm still investigating. If I found the cause I will create a PR to fix repaint issues.

Update:
Since it is very hard to hunt down the cause of repaint, I hope this will be fixed by #65. Applying property will-change as workaround is not a good choice, instead better fix the real cause. It is really interessting that applying various height to elements can cause repaints.

Reproduction

• Enable Paint flashing & Scrolling performance issues in chrome dev tools
• Open the new story With Scrollbar
• See the issue on the app iframe
• Open story in new Tab with Toolbar
• See the issue on the app id element

Environment

• OS with version: Windows 11
• Browser with version Chrome canary
• JS Runtime with version: NodeJS v20.2.0