Openfoodnetwork: [mobile ux] Sticky search bar disappears when cart is open on tablet/mobile

[daniellemoorhead]

Expected Behavior

When I scroll down the page and have the search bar stuck to the top of the screen, when the cart opens the search bar should still be visible.

Actual Behaviour

When I scroll down the page and have the search bar stuck to the top of the screen, when the cart opens the search bar disappears, and then reappears again when the cart is shut.

Animated Gif/Screenshot

https://www.loom.com/share/ef522d58605849d58ea31d8f3bde2966

Workaround

Severity

bug-s1: a critical feature is broken: checkout, payments, signup, login
bug-s2: a non-critical feature is broken, no workaround
bug-s3: a feature is broken but there is a workaround
bug-s4: it's annoying, but you can use it
bug-s5: we can live with it, only a few users impacted

Your Environment

Was able to replicate this on my iPad mini 4 plus my iPhone SE, plus using browserstack on an Android Samsung Galaxy tab S6.

[andresgutgon]

Is this important? I mean, I don't know well the product but in the loom looks like when the cart is open is not possible to search, it is?

[Erioldoesdesign]

It's not important for the user to actually use the search, as you say the checkout basket sidebar is an 'overlay' where they can only do things in that pop-out unless they close it. It's more about the search bar disappearing just looks like a poor quality exp and at the worst, a user might be distracted by it and think it's 'broken'.

I tried to figure out what's happening here but couldn't find any easy CSS change that fixed this. I have a suspicion it's the position: sticky getting overridden by something in the sidebar css. I can't find it though :/ but I was doing some stackoverflow digging and found some references to things like box shadows affecting position sticky...

[daniellemoorhead]

I could not have put it better Eriol, thank you.

This is new functionality, newly built. If we can't get the experience
right now, then it'll never be fixed and it does indeed reflect badly in
terms of the user experience if we can't get these things right. This is
the finesse we need to start building into the front end of our platform.
This finesse is what makes shoppers more likely to buy more, to keep coming
back, and to say good things about us to their friends. It's important.

[Matt-Yorkley]

I don't know well the product but in the loom looks like when the cart is open is not possible to search, it is?

It's not possible to search with the cart open, it's just about the visual bug.

Do you want to take this issue @andresgutgon ?

[andresgutgon]

I'll take a look during the weekend if I have time :)

[andresgutgon]

☝️ I think I have a fix. Honestly I continue thinking this is not a big problem but it was interesting :)