I've encountered a challenge with my web page layout where I'm trying to position a button in a fixed location on the top-right corner, just below a fixed header. While it works perfectly on Chrome for Windows, Mac, and Android, it fails to display correctly on Safari and Chrome for iPad.
To demonstrate the issue, I've created a simplified version in a fiddle: https://jsfiddle.net/aorsten/qg76vzue/47/
When you open the fiddle in Chrome (excluding iPad and possibly other iOS devices), you'll notice a "THIS LINK" link in the top right corner. However, in Safari, the link is invisible even though it seems clickable, and hovering over it changes the cursor to a pointer.
In addition to using bootstrap for styling, here's the CSS and HTML snippet I have:
[CSS]
html {
position: relative;
background: #fff;
min-height: 100%;
}
.headbar {
height: 10.5vh;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.8);
}
...
[HTML]
<nav class="navbar fixed-top navbar-light bg-white headbar">
<a>some image</a>
...
I've struggled to resolve this issue, and I'm hoping for some guidance. What exactly is causing the problem in Safari/iOS? And how can I ensure the link is visible?