Let scrollbar clicks pass through the Qualified widget strip - #3972
Open
paoloredis wants to merge 2 commits into
Open
Let scrollbar clicks pass through the Qualified widget strip#3972paoloredis wants to merge 2 commits into
paoloredis wants to merge 2 commits into
Conversation
On production the Qualified chat widget (injected via GTM, not part of this repo) restyles <html> to overflow:hidden so <body> becomes the page's scroll container, and parks an invisible ~20px-wide, full-height, max-z-index iframe (#q-messenger-frame) against the right edge of the viewport — exactly where body's scrollbar sits. Chrome hit-tests its scrollbars before page content, but Firefox hit-tests content first, so the invisible strip swallowed every click and hover on the scrollbar: it never reacted and, with overlay scrollbars, never faded in. Reported as 'the scrollbar doesn't show up on Firefox'; never reproduces on hugo server because GTM only runs on production. Disable pointer events on the strip while the chat is closed. The widget sets the q-docked attribute on <html> whenever the panel is open (on mobile too, where the docked width is 0), so scoping the override to html:not([q-docked]) hands pointer events back to the open panel. Verified by hit-testing (elementFromPoint) a repro page built from the widget's captured stylesheet plus a simulated messenger iframe: without the fix the strip captures the point next to the scrollbar; with the fix clicks pass through; with q-docked set the frame captures again. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
Contributor
🧠 Redis MemoryFound 7 related items from repository history (2 new this commit):
Memory updated at 7f5cb8e |
|
|
Collaborator
|
I can see the scroll bar flash for a split-second on pages under https://redis.io/docs/staging/DOC-7044/ but it goes away for some reason. Thanks for working on this! |
Reviewers on DOC-7044 still saw the scrollbar flash at load and vanish. The pointer-events fix in the previous commit was real but secondary; the disappearance itself has a different mechanism. The Qualified widget replaces root scrolling with a <body> scroller. At init it measures the root scrollbar width N, then applies html { width: calc(100dvw - N); margin-right: N; overflow: hidden } and body { width: calc(100% + N) }, so that body's scrollbar lands exactly where the root scrollbar was. With overlay scrollbars N = 0 and nothing breaks, which is why this never reproduced on trackpad Macs. With classic always-visible scrollbars (Windows, or macOS with a mouse) N is ~15-17px: body overshoots html's box by N, and html's own overflow: hidden clips body's scrollbar out of view. The root scrollbar dies when the widget loads and its replacement is never visible. While the chat is closed (html[q-docked-target]:not([q-docked])), neutralize the compensation: html back to 100dvw with no margin, body back to 100%. Body then fills the window and its scrollbar sits at the window edge, unclipped. While the panel is docked open the widget's own geometry applies untouched — verified html still shrinks by the panel width. Also scope our html { scrollbar-gutter: stable } to auto while the widget is active: a reserved gutter inside the widget's overflow-hidden html box would push body's scrollbar inboard again. Verified against the live staging build in Firefox by injecting these rules at document start: body flush with the window, a real mouse drag on the thumb at page top scrolls (previously dead), wheel scrolling unaffected, and docked mode still lays out correctly. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Collaborator
Author
|
Could you please try again now @mich-elle-luna ? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
On production the Qualified chat widget (injected via GTM, not part of this repo) restyles to overflow:hidden so becomes the page's scroll container, and parks an invisible ~20px-wide, full-height, max-z-index iframe (#q-messenger-frame) against the right edge of the viewport — exactly where body's scrollbar sits. Chrome hit-tests its scrollbars before page content, but Firefox hit-tests content first, so the invisible strip swallowed every click and hover on the scrollbar: it never reacted and, with overlay scrollbars, never faded in. Reported as 'the scrollbar doesn't show up on Firefox'; never reproduces on hugo server because GTM only runs on production.
Disable pointer events on the strip while the chat is closed. The widget sets the q-docked attribute on whenever the panel is open (on mobile too, where the docked width is 0), so scoping the override to html:not([q-docked]) hands pointer events back to the open panel.
Verified by hit-testing (elementFromPoint) a repro page built from the widget's captured stylesheet plus a simulated messenger iframe: without the fix the strip captures the point next to the scrollbar; with the fix clicks pass through; with q-docked set the frame captures again.
Note
Low Risk
CSS-only, production-widget-specific selectors with
!important; no auth or data paths, though layout could shift slightly when the widget is active.Overview
Adds Qualified chat widget overrides in
index.cssfor production (GTM-injected widget), scoped withq-docked-target/q-dockedon<html>.While the panel is closed, the widget’s width/margin compensation is neutralized so
<body>’s scrollbar stays at the viewport edge and is not clipped byhtml { overflow: hidden }. When the widget is active,scrollbar-gutter: stableis turned off onhtmlso it does not double-reserve gutter space inside the widget layout.For Firefox,
pointer-events: noneis applied to#q-messenger-framewhen the chat is not docked open, so the invisible edge iframe no longer steals clicks/hovers from the page scrollbar; open panel behavior is preserved whenq-dockedis set.Reviewed by Cursor Bugbot for commit 7f5cb8e. Bugbot is set up for automated code reviews on this repo. Configure here.