fix(dialog): scrollbar Flash on opening #5121

[bipedal-eel]

This prevents the scrollbar from flashing (Chromium) as mentionend in #5121

[asyncLiz]

If I understand correctly, this works by not forcing the scrollbar to show (auto vs scroll) if we detect overflowing content in JS and add the .scrollable class?

What is the advantage to this solution as opposed to addressing the issue in JS that results in an inaccurate toggling of the .scrollable class?

For example, toggling the class after open animations have settled as suggested in #5121 (comment).

[bipedal-eel]

Yes, you understand correctly.

I suppose ive always been drilled on doing css over js but I can see your point, especially since there are open and close methods already.

Will do this in js 👍

[asyncLiz]

Why is overflow-y: clip vs the default overflow-y: visible needed for the scroller?

[bipedal-eel]

Not too sure on that actually... .content overflows when scroller is set to auto, so this prevents that. This would make more sense in a .scrollable > .content but as mentioned above ill go do this in js

[bipedal-eel]

i have found the underlying issue:

the screenshot is console logs in render():

protected override render() {
    console.log("isOpen", this.isOpen)
    console.log("open", this.open)
    console.log("opening", this.isOpening)
    const scrollable =
      this.open && !(this.isAtScrollTop && this.isAtScrollBottom);
    console.log(scrollable)
// ...
}

Now, scrollable is only set when !isOpening.

const scrollable =
      !this.isOpening && this.open && !(this.isAtScrollTop && this.isAtScrollBottom);

I tested this a bit and as far as i can tell, this does not break anything.

If it does, an alternative soloution would be the comment you mentioned or setAttribute("opening", "") and doing:

.scrollable .scroller:not([opening]) {
  overflow-y: scroll;
}