mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-25 20:46:48 +00:00
636da229ad
So I think the issue is that all the HTML is wrapped on an
`off-canvas-wrap` class that is used for doing the sidebar car open over
main content. The problem is that when this car sidebar is open body of
HTML overflow is changed to `overflow: hidden` and search bar use CSS
`position: sticky;` which doesn't work when its parent has overflow
hidden. The issue was that `off-canvas-wrap` had an `overflow: inherit`
which means when body is set to overflow hidden this div inherits it and
break search bar position sticky when cart sidebar is opened. The
solution is to use `position: initial` which means use what a div has as
default value for `overflow` which I think it's `visible`. This class is
overriding the same class that comes from Foundation Framework that set
this div to be `overflow: hidden`. The override was added when [we added
search sticky](ff69389bb0)
More info about the problem with [position:sticky and its parent having
overflow hidden](https://css-tricks.com/dealing-with-overflow-and-position-sticky/) also info about [position initial vs inherit](https://stackoverflow.com/a/29661356)