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

Anki Card Design
1

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

2

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.

3

Sorry to revive an old thread, but I am having trouble getting a footer to remain in a constant position on the screen on AnkiMobile, even after using this method. I have attached my ‘basic’ card template below:

image
image731×291 5.77 KB

image
image800×528 11 KB

image
image618×867 14.7 KB

The contents of the ‘footer’ class are what I would like to stick to the bottom right corner of the screen. It works everywhere except iOS AnkiMobile

It seems other people have been able to get this work, so I’m not sure what I’m doing wrong. Would appreciate any input, thank you!

4

Since AnkiMobile is proprietary and I don’t own a Mac or use the app personally, debugging such issues is very cumbersome for me. Two years back when I posted that “solution” I debugged AnkiMobile through trial and error and appending console logs to the document.

I can only assume it has something to do with AnkiMobile using a single webview for the UI (header, footer) and card content. Hence when you absolutely position something to the bottom, it is actually overlayed by the footer.

5

I have no experience with the -webkit-fixed position, so I can’t speak to that. iOS Safari behaves differently to the desktop Chromium web toolkit, so not all things that work on one will work on the other. I suggest you start by trying to figure out the correct CSS outside of AnkiMobile, by eg. using jsfiddle.net in Safari. If it works there, there’s a decent chance it will work in AnkiMobile too.

6

Thank you both for your thoughtful responses! I’ll play around with things and report back if I figure it out.