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

[Modal] Prevent closing the modal when webkit scrollbar has been dragged #437

Conversation

lubber-de
Copy link
Member

Description

As mentioned in #431 (comment) by @ko2in, a modal gets closed when a webkit-custom scrollbar of the dimmer has been dragged
It seems to be only happening on webkit because of the custom scrollbar. The event system still recognizes the dimmer as target.

The new option scrollbarWidth by default has the same value as the @customScrollbarWidth value from site.less. I initially wanted to calculate the scrollbar-Width at runtime via javascript, but it turns out this is not possible, because webkit does not return a width difference if a custom scrollbar is used. (that probably also the reason why the event still receognized the dimmer when clicking on the scrollbar)
I think, using the same value as the webkit scrollbar width is the more reliable solution.

Testcase

Drag the dimmers scrollbar and watch how ...

Broken

... the modal closes
http://jsfiddle.net/7qa1upwf/2/

Fixed

.. the modal stays
http://jsfiddle.net/hvf4w2ap/

@lubber-de lubber-de added type/bug Any issue which is a bug or PR which fixes a bug lang/javascript Anything involving JavaScript state/awaiting-reviews Pull requests which are waiting for reviews labels Jan 28, 2019
@lubber-de lubber-de added this to the 2.7.x milestone Jan 28, 2019
Copy link
Member

@y0hami y0hami left a comment

Choose a reason for hiding this comment

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

LGTM

@lubber-de lubber-de added state/awaiting-docs Pull requests which need doc changes/additions browser/chromium Any issues relating to Chromium (Chrome, Edge (new), Opera, Brave etc.) labels Jan 28, 2019
@lubber-de lubber-de added state/has-docs A issue/PR which requires documentation changes and has the corresponding PR open in the docs repo and removed state/awaiting-docs Pull requests which need doc changes/additions labels Jan 28, 2019
Copy link
Member

@ColinFrick ColinFrick left a comment

Choose a reason for hiding this comment

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

LGTM

@y0hami y0hami merged commit bdf30a8 into fomantic:develop Jan 29, 2019
@lubber-de lubber-de modified the milestones: 2.7.x, 2.7.2 Jan 29, 2019
@lubber-de lubber-de removed the state/awaiting-reviews Pull requests which are waiting for reviews label Jan 29, 2019
@y0hami y0hami mentioned this pull request Feb 4, 2019
@lubber-de lubber-de deleted the fix/webkit_scrollbar_dimmer_click_modal_close branch February 5, 2019 11:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
browser/chromium Any issues relating to Chromium (Chrome, Edge (new), Opera, Brave etc.) lang/javascript Anything involving JavaScript state/has-docs A issue/PR which requires documentation changes and has the corresponding PR open in the docs repo 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.

3 participants