One of the current challenges we are facing involves implementing an action button similar to the one found in GMail for adding new content. This button needs to remain fixed during scroll.
Here is the HTML code:
<div class="addButton actionButton" onclick="">
<i class="fa fa-fw fa-plus"></i>
</div>
And the corresponding CSS:
.addButton
{
position: fixed;
bottom: 1em;
right: 1.5em;
z-index: 10;
background-color: #00aa00;
}
While this setup works smoothly on Android and browsers, there seems to be a glitch on iOS devices. It appears that when using slide view functionality, if one of the parent divs has a position:relative, the button's positioning is affected. Whenever we scroll, the button remains static. However, upon transitioning to the next slide and back, the button adjusts correctly. It seems like iOS fails to update the viewport accordingly. Any suggestions on how to overcome this issue?