I'm building a cordova app. In a certain screen we require a header-like element to keep itself fixed in a certain position; even if the user scrolls (that means: we are looking for "position: fixed" not "position: absolute").
In Android it works perfectly. But for iOS, using that property results in a not very user-friendly behaviour. It seems as if iOS has it's own pacing times to update everything that's happening on-screen; everything reveals itself nicely as you scroll up or down, but this header-like element we are trying to "fix" to a position will only update its position when the scrolling is finished or when the user clicks the screen, giving us a pretty weird UI behaviour.
GIFS:
How it correctly works on Android (and hopefully, how it should on iOS): https://giphy.com/gifs/android-working-position-fixed-3oKIPcTLALGy9UYC9W
How it's currently working on iOS: https://giphy.com/gifs/ios-position-fixed-updates-only-after-scroll-finishes-hpKhFnNzkotji
I've read across multiple stackoverflow's issues regarding some similar problems to this. But most answers out there do not fix this, because none of them were addressing a case precisely like this one (sorry if I actually missed a post in which someone had this exact same problem). I've tried these, but none work:
-webkit-overflow-scrolling: touch
transform: translate3d(0, 0, 0) // Tested by applying to parents or childs. It should work by accelerating hardware processing. But it didn't :/
-webkit-transform: translate3d(0, 0, 0)I understand that "position: fixed" is not a very good friend of iOS. So, my secondary question on this topic would be: is there a better way to do this? How do app developers for iOS deal with fixed headers or fixed footers using CSS/HTML? I'm pretty sure there must be a "correct standard path" for iOS.