The footer shadow disappears when a button is hovered

ckrina → credited q0rban → .

Crediting @q0rban for reporting it.

It was a bit tricky, but working now and working even better than before from my pov.

Previous shadows were added using CSS gradients technique. However we can't use this method, since inner elements in the tree contains background colors (on hover, active, etc states) which are overlapping parent gradient (that's why shadow disappeared @ckrina on hovering).

Now shadows are controlled by javascript (which is OK i think, and there will be no shadows at all if js is disabled in browser).

Mobile behavior:

Desktop behavior:

ckrina → changed the visibility of the branch 3405006-the-footer-shadow to hidden.

ckrina → changed the visibility of the branch 3405006-the-footer-shadow to active.

I have reviewed #6 and it is working fine as per the proposed solution so I am moving it to RTBC.
Thanks.

Sorry, i didn't change status after MR discussion.
I still think that we can move it outside of sidebar.

Rerolled previously added script here. It seems me more delicate approach. Please review.

Hi @finnsky I have review this MR and It looks good to me. Footer shadow is also not getting disappear after hover on buttons.
Hence changing status to "RTBC".
Thanks.

Sorry, i retested my work. Seems i forgot to manage header shadow in expanded state. Sending back to NW.

@finnsky

I am not sure, this issue is related to this or not. On hover of last menu item, the bottom border disappears/overflows.

Thanks!

chetansonawane → changed the visibility of the branch single-overflow-script-3405006 to hidden.

chetansonawane → changed the visibility of the branch single-overflow-script-3405006 to active.

@finnsky,

I think the whole UI behavior is changed now, I can not see the dropdown functionality while hovering on the menu item, on hover of the first level menu it expand left side and on hover of second level menu there is dropdown, but UI is different, so it is working fine, we can close this issue.

@chetansonawane thank you for testing.

I think it should be rebased or even recreated first.
Problem still present in current 1.x

Here also we need to fix this one.

I suggest to add to resize observer for that shadows.

Gauravvvv → made their first commit to this issue’s fork.

Gauravvvv → changed the visibility of the branch single-overflow-script-3405006 to hidden.

Gauravvvv → changed the visibility of the branch 3405006-the-footer-shadow to hidden.

Thank you for backporting this.

Some notes.

Since that original script was written lot of things were changed.
We need to rework at and adapt to current logic.

1. I see shadow on mobile but not on desktop
2. I see broken header and wrong padding relative to footer.
https://gyazo.com/f08ad11ee5f5d21f4290af428d220d72

3. I see some flickering on popover open
https://gyazo.com/b80215700f117abb7350000800758d08
probably not related to this fix but better to check

ahsannazir → made their first commit to this issue’s fork.

The shadow is shown both on Desktop & Mobile when data-detected-y-overflow="true"

The 2nd point mentioned in #32 about flickering needs to be investigated more and fixed accordingly.