Sticky element doesn't work properly in iOS Chrome - html

Question

I'm working with a website (Gatsby) with a sticky bar at the bottom on one page. I'm using position: sticky to stick the bar to the bottom of the screen. However, this works on all other mobile browsers but Chrome in iOS.
Scenario:
First page: This page has a list. When clicked on an item, it will open the second page in a new tab.
Second page: This is the page with the sticky bar and this opens in a new tab.
Issue: When I go to the first page, click on the item, and goes to the second page which opens in a new tab, the sticky bar gets covered from the bottom toolbar. However, if you click on the second page's link directly and visit it, the sticky bar works fine.
Has anyone of you encountered something like this before? Can this be a bug in iOS Chrome or am I doing something wrong?
Code 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
}
Please see the below gifs as a reference.
Visiting from the first page: https://ibb.co/6yMLLm3
Direct visit using the URL: https://ibb.co/Mp1rknm

Answer 1

This isn't a full answer as it doesn't have a workaround (as yet!) but I put this finding here in case it helps us get nearer the solution.
Try running these two bits of code. The first takes you the site without a `target="_blank" in the a element - i.e. it stays in the same browser tab. The second has the target attribute so opens a new tab. The first shows the sticky div correctly, the second only when the user has scrolled.
No target - works OK:
goto site
With target - doesn't work OK
goto site
(can't run it as a snippet it seems).
There is a target="_blank" in the first page code and this seems to cause Chrome IOS to malfunction.
Update: while the problem discussed in this post is not the same, it does seem people were having problems with target_blank in Chrome on IOS, including in one case removing the target_blank to get round the problem. See https://support.google.com/chrome/thread/10249317?hl=en