Skip to content

Fix screen thrash when "position: sticky" container resize is triggered#146

Merged
texodus merged 1 commit intomasterfrom
fix-sticky-resize-thrash
Dec 7, 2021
Merged

Fix screen thrash when "position: sticky" container resize is triggered#146
texodus merged 1 commit intomasterfrom
fix-sticky-resize-thrash

Conversation

@texodus
Copy link
Copy Markdown
Member

@texodus texodus commented Dec 7, 2021

When re-sizing (shrinking) a container containing a <regular-table>, the .rt-table-clip container with position: sticky will sometimes emit a blank frame, causing the table to flicker, only in Chrome. I've tried a whole laundry list of fixes, including but not limited to:

  • Alternatives to sticky
    • fixed without position works but stutters on Safari and overlaps scroll bars on the parent web component.
    • absolute with Javascript position update stutters on keyboard scroll.
  • -webkit-transform: translate3d(0, 0, 0), transform: translateX(0), backface-visibilitiy: hidden and various layout-acceleration-forcing CSS properties.
    contains: strict on the sticky element itself seems to finally do the trick. This really shouldn't have any affect on regular-table, since the DOM is virtual and thus only very slightly overflows the container, but it does.

@texodus texodus merged commit 78130c8 into master Dec 7, 2021
@timkpaine timkpaine deleted the fix-sticky-resize-thrash branch February 15, 2023 03:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant