AnkiMobile issue: position:fixed not working as expected | + Solution

Just a little heads-up if anyone ever wants to use position: fixed or position: sticky for a header, button etc. on AnkiMobile:

Issue

While elements with position: fixed/sticky will stay in a fixed position on Anki Desktop or AnkiDroid, they will scroll with the content on AnkiMobile.

This has likely something to do with the following meta tag which is found on Safari for iOS, but none of the other clients:

<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=10,user-scalable=1">

Old issue on StackOverflow: iphone - position:fixed ios 6.1 not working when viewport meta tag is defined - Stack Overflow

3 Likes

Use the vendor-prefixed values -webkit-fixed and -webkit-sticky in addition to the normal variant:
Example:

.header {
  position: -webkit-fixed;
  position: fixed;
}

Then the element should be fixed as expected on AnkiMobile.


It took me way too long to find this solution, so I’m hoping I can shorten someone else’s search with this.

1 Like