Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

FSE - Mini-Cart Drawer block does not trigger the recalculation of the gallery size while it removes the scrollbar #9635

Closed
Tracked by #9198
webaxones opened this issue May 29, 2023 · 4 comments · Fixed by #9648
Closed
Tracked by #9198

FSE - Mini-Cart Drawer block does not trigger the recalculation of the gallery size while it removes the scrollbar #9635

webaxones opened this issue May 29, 2023 · 4 comments · Fixed by #9648
Assignees
@Aljullu
Labels
block: mini-cart Issues related to the Mini-Cart block. type: bug The issue/PR concerns a confirmed bug. type: community contribution

Comments

@webaxones
Copy link

webaxones commented May 29, 2023 •
edited
Loading

Opening the mini cart drawer makes the scrollbar disappear (due to CSS): but the JS does not detect resizing (expansion of the page since the scrollbar width is reduced) so the width of the photo gallery is not recalculated and we see a piece of the next photo.

Since it moves all the elements on all pages of the website, I think adding an overflow-x:hidden to the body would be sufficient when the drawer is open. Of course, this means that one can scroll on the page, but it's not bothersome. At least, it's less bothersome than seeing the elements behind the overlay resize.

Chrome/Firefox
WP 6.2.2
WC 7.7.0
WC Blocks 10.3.0

mini-cart
The above screenshot does not show the entire window by personal choice
@webaxones webaxones added the type: bug The issue/PR concerns a confirmed bug. label May 29, 2023
@Aljullu Aljullu added the block: mini-cart Issues related to the Mini-Cart block. label May 30, 2023
@Aljullu Aljullu mentioned this issue May 30, 2023
Closed
@gigitux
Copy link
Contributor

gigitux commented May 30, 2023

Hi, @webaxones!
Thanks for opening this issue! We added this issue in the main issue about the Mini Cart block (#9198). In the following days, we will take a look at this!

@webaxones
Copy link
Author

webaxones commented May 30, 2023 •
edited
Loading

Hi @gigitux
Thanks,
Here are two short videos to see the generated movements.
product-page

prod-category-page

In the meantime, I have added this to my CSS to handle the issue:

body.drawer-open {
	overflow: auto !important;
}

@Aljullu Aljullu self-assigned this May 30, 2023
@Aljullu Aljullu mentioned this issue May 30, 2023
Merged
4 tasks
@Aljullu
Copy link
Contributor

Aljullu commented May 30, 2023

Thanks for opening this issue @webaxones!

Since it moves all the elements on all pages of the website, I think adding an overflow-x:hidden to the body would be sufficient when the drawer is open. Of course, this means that one can scroll on the page, but it's not bothersome. At least, it's less bothersome than seeing the elements behind the overlay resize.

The reason we made the page non-scrollable when the Mini-Cart block was open was because we detected it was confusing and it had a negative impact on accessibility. On mobile devices, it was particularly confusing because the page was completely covered by the drawer and yet it could still be scrolled.

In #9648 I tried an alternative approach. We keep the <body> without scroll, but we add a right padding with the same width as the scrollbar. I think that has the benefits of both approaches. 🙂

@webaxones
Copy link
Author

@Aljullu That works for me! 👍

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Aljullu Aljullu

Labels
block: mini-cart Issues related to the Mini-Cart block. type: bug The issue/PR concerns a confirmed bug. type: community contribution
Projects
None yet
Milestone
No milestone
3 participants
@Aljullu @gigitux @webaxones