Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(modal): use resizeobserver #2969

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

lubber-de
Copy link
Member

@lubber-de lubber-de commented Dec 20, 2023

Description

This PR changes the refresh behavior of modals to recalculate their dimensions. The previous logic was checking for DOM-Nodes only, but the only need was to know when the modal gets resized.
For non supporting browsers i kept in the old logic as a fallback.

This now works in Firefox as well.

The dimmers scrollbar will now also not trigger content movement (#679) anymore when used in modern browsers. However this does not nicely work when detachable: false is used (tried a lot dealing with complicated tricks using the html tag as the scrollbar-gutter property does not work for the body element out of the box but it always left a white scrollbar even if the modal fitted into the viewport, so i decided to live with that limitation for now)
As this feature will always occupy a possible scrollbar width (even if a scrollbar won't appear), only modals which are supposed to be scrollable (by interaction or application logic while the modal is shown) should be given a new css class scrollable to gain the fix. Otherwise every modal wouldnt be centered anymore.

I also adjusted the dimmer positioning and close icon appearance when detachable:false in a custom context is used

Testcase

Resize the textarea, a scrollbar should appear to the modals dimmer
https://jsfiddle.net/lubber/drb6fpog/1/

Closes

#679
#2476
#2920

@lubber-de lubber-de added type/bug Any issue which is a bug or PR which fixes a bug lang/css Anything involving CSS state/awaiting-reviews Pull requests which are waiting for reviews javascript Pull requests that update Javascript code labels Dec 20, 2023
@lubber-de lubber-de added this to the 2.9.4 milestone Dec 20, 2023
@@ -447,6 +448,9 @@
overflow: auto;
overscroll-behavior: @overscrollBehavior;
}
.modals.dimmer {
scrollbar-gutter: stable;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this needed, will it imply scrollbars always shown? In the PR description there is mentioned something with detachable: false, is this related?

There is mentioned "The dimmers scrollbar will now also not trigger content movement anymore". I tried the demo (in Firefox) and when the textarea is resized, the content is unexpectedly always scrolled to the top when resized.

Copy link
Member Author

@lubber-de lubber-de Dec 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this needed, will it imply scrollbars always shown? In the PR description there is mentioned something with detachable: false, is this related?

No, the scollbars are not always shown. This will occupy a possible shown scrollbar margin, but will not show an empty scrollbar in case the element is not body and no overflow happens
See example at #679

The problem with "detachable:false" in case context is body, is that body does not support this feature (scrollbar-gutter) (firefox+safari don't care at all, because those have their own implemented "overlay scrollbar feature")
Because of this the parent element would need to get scrollbar-gutter:stable instead. This basically works, but as the html element does not have any dimmer color set, it would display a white empty scrollbar in case the modal fits the screen. It also left a second scrollbar when closing the modal...very ugly

If you want to see/try my hack:

The jsfiddle does only barely show the issue as jsfiddle has a black parent background which the html element inside the iframe inherits (so the permanent occupied right scrollbar area is black, but still not the "dimmer black"
https://jsfiddle.net/lubber/cyjnta1d/3/

I also tried messing around with the dimmer animation to also make the html element inherits that, but the transition was not in sync and the code bloated away as we would need to support every possible dimmer variation just for that.

We would also need to support non body context elements... lots of code and cases for, IMHO, little benefit

@supports (scrollbar-gutter: stable) and (selector(:has(.f))) {
    html:has(body.undetached.dimmable) {
      overflow: auto;
    }
    html:has(body.undetached.dimmable.dimmed) {
      overflow: auto;
      scrollbar-gutter: stable;
    }
    body.undetached.dimmable.dimmed.dimmed {
      overflow: hidden;
    }
}

There is mentioned "The dimmers scrollbar will now also not trigger content movement anymore".

What was meant by this is #679 (comment)

I tried the demo (in Firefox) and when the textarea is resized, the content is unexpectedly always scrolled to the top when resized.

mmh, thats the in between discussion where i was not able to reproduce this.

The modal is only put to the top when the it detects the current modals size would not fit (thus adds the scrolling class). Whenever i am able to reproduce this, i take a look again and prepare a separate PR as some browser (firefox) measurements seem to provide questionable values inside module.can.fit() in some situations

Copy link
Contributor

@mvorisek mvorisek Dec 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your detailed explanation and your work on this topic.

I tried the demo (in Firefox) and when the textarea is resized, the content is unexpectedly always scrolled to the top when resized.

mmh, thats the in between discussion where i was not able to reproduce this.

I meant the demo of/from this PR - https://jsfiddle.net/lubber/drb6fpog/1/

Steps to reproduce:

  1. open the https://jsfiddle.net/lubber/drb6fpog/1/ in Firefox
  2. resize the textarea vertically by dragging the right bottom corner to make the modal larger than the viewport
  3. scroll down the modal
  4. now try to resize the dropdown by dragging the right bottom corner
  5. the modal is unexpectedly scrolled to the top immediately - I would expect no scroll/jump
  6. also notice when you click the textarea resize corner and have F12 "Inspector" tab open, div.dimmer div.modal div in the inspector tab flashes yellow meaning something has changed, but I did not noticed/see any real css/class changes, meaning some same value is set from a mutation observer or even possibly worse, some value is set and immediatelly changed back

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i take a look into this

@lubber-de lubber-de added the state/awaiting-docs Pull requests which need doc changes/additions label May 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
javascript Pull requests that update Javascript code lang/css Anything involving CSS state/awaiting-docs Pull requests which need doc changes/additions state/awaiting-reviews Pull requests which are waiting for reviews type/bug Any issue which is a bug or PR which fixes a bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants