I recently encountered an issue with a sticky bar on a website (Gatsby) that appears at the bottom of the screen on one particular page. The sticky bar is implemented using position: sticky, and it works perfectly on all mobile browsers except for Chrome in iOS.
Here's the scenario:
First page: This page contains a list. Clicking on an item opens the second page in a new tab.
Second page: This is the page with the sticky bar, which also opens in a new tab.
The issue arises when transitioning from the first page to the second page via clicking on an item. In this case, the sticky bar gets covered by the bottom toolbar. However, if you directly visit the second page, the sticky bar functions correctly.
Have any of you faced a similar problem before? Is this potentially a bug within iOS Chrome or could there be an error in my implementation?
Below is the code snippet I'm using for the sticky bar:
.floating-bar {
display: flex;
position: sticky;
align-items: center;
justify-content: space-between;
padding: 0 25px;
bottom: 0;
left: 0;
z-index: 10;
width: 100%;
box-sizing: border-box;
background: white;
border-top: 1px solid #dfe1e6;
height: 60px;
overflow: hidden;
// + some paddings based on the viewport
}
For visual reference, please check out the gifs below:
- Screenshot from transition - https://ibb.co/6yMLLm3
- Direct visit screenshot - https://ibb.co/Mp1rknm