Custom-built bottom bars that don't play nicely with mo...

At a glance

The post describes an issue with custom-built bottom bars not playing nicely with mobile Chrome, where the bottom-fixed bar floats up on downward scroll when the tabs bar recedes. Community members provided suggestions to address this issue:

1. Set the parent container to 100svh and keep it relative, then position the bottom bar as sticky or absolute with bottom: 0.

2. Use 100% SVH or DVH instead of VH for the parent container.

There is no explicitly marked answer in the comments.

BBrandon Beaver

Super random question:

Anyone have custom-built bottom bars that don’t play nicely with mobile Chrome?

Bottom-fixed bar floats up on downward scroll when the tabs bar recedes. Anybody solve this before?

2 comments

RRajan

Try to give 100 svh to the parent container and keep it relative & to the bottom bar, give the position sticky or absolute and bottom 0.

You can do a dedicated parent child combo for this and put it after your body.

So..

Body
~ Tab Container : Relative, 100SVH
~~~ Tab Component : Absolute, Bottom 0

SSamir T

Yes, make sure to use 100% SVH or DVH rather than VH

Add a reply

Community forum for knowledge and support

Custom-built bottom bars that don't play nicely with mobile chrome