bootstrap
bootstrap copied to clipboard
twbs
In Safari, opening an offcanvas element from the side changes the window width, which can trigger a media query
Prerequisites
- [X] I have searched for duplicate or closed issues
- [X] I have validated any HTML to avoid common problems
- [X] I have read the contributing guidelines
Describe the issue
In Safari, with the macOS scrollbars set to always show, opening an offcanvas element from the side changes the window's width, which can in turn cause a width-based media query to become active or inactive. Since media queries are often used to hide the whole offcanvas-and-button mechanism at certain breakpoints, this is actually a fairly significant bug that can cause menu-functionality to completely break in certain scenarios (i.e., the user's act of opening the offcanvas element can trigger the media query that causes the offcanvas element and its open-button to disappear).
To reproduce, first make sure that you've got the macOS scrollbars set to always show, as in this screenshot (from System Settings in macOS 13.5.2):
Next, open Safari (I'm on v. 16.6) and visit Bootstrap's offcanvas documentation page. Make the window 990px wide (just below the 992px breakpoint), so that what happens will be visually apparent. Then scroll down to the "Toggle right offcanvas" button and click it; you should see the page-layout change while the offcanvas element is open (because the 992px breakpoint kicks in), and you should see it return to its original state once the offcanvas element is closed. Here is a video demonstration:
https://github.com/user-attachments/assets/5d671720-d18e-456d-a54a-efa610a3941a
And below is a "worst-case" demonstration from another website, where the triggered breakpoint actually causes the offcanvas element to disappear as a result of it's opening. (At the start of the video, I shrink the window down to just below the breakpoint in question.)
https://github.com/user-attachments/assets/33f98ed3-6e0f-4293-8aea-7ee7d37a935c
The problem is almost certainly related to the right-padding that gets added to the <body> when the offcanvas element is open (it's 15px for me, and the problem arises if I'm within 15px of a media-query breakpoint).
Reduced test cases
https://getbootstrap.com/docs/5.2/components/offcanvas/
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Safari
What version of Bootstrap are you using?
v. 5.2.x (latest on the Bootstrap website)
