Het ROB-Team
Het ROB-Team

Reputation: 11

Cordova footer position fixed IOS11

I've created a Cordova/Phonegap website and every works fine, except on a iPhone X with IOS 11. The problem is that the footer is position fixed at the bottom but it doesn't stay there the whole time. If I scroll down on the app the footer stands still for a second and then gets to the bottom. The problem only appears on that phone, not on a Android or Windows.

.footer-result
 background-color: $color-4
 bottom: 0px
 clear: both
 color: $color-1
 display: block
 font-family: "ff-kava-web-pro", sans-serif
 font-size: 1.3em
 left: 0
 right: 0
 padding: 10px 20px
 position: fixed !important
 width: 100%
 z-index: 9
 transform: translateZ(0)

example image app

Upvotes: 1

Views: 2430

Answers (1)

dijipiji
dijipiji

Reputation: 3109

Okay - lots of CSS files in there - so hard to quickly debug, but I think if you move your fixed footer element to be a simple child of "body" or maybe div class "views" then the element should truly fix to the bottom. I have seen fixed elements in iOS jump about or position incorrectly when their parent divs have absolute or relative positions. Also you might want to look at this page: https://stanko.github.io/ios-safari-scoll-position-fixed/

Good Luck!

Upvotes: 2

Related Questions