Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[AnkiMobile] position: fixed does not work #6

Open
Aquafina-water-bottle opened this issue May 8, 2023 · 0 comments
Open

[AnkiMobile] position: fixed does not work #6

Aquafina-water-bottle opened this issue May 8, 2023 · 0 comments
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@Aquafina-water-bottle
Copy link
Owner

Aquafina-water-bottle commented May 8, 2023 •
edited

The CSS style position: fixed does not appear to work on AnkiMobile. This has multiple implications:

  • Audio buttons, which are normally fixed to the bottom left corner, are now fixed to the bottom left corner of the qa div.
  • Anything that is supposed to take up the full screen, such as the info circle and image zoom, only takes up the area of the qa div.

Unfortunately, I do not know of a good way of fixing this. If anyone is interested in taking a jab at this issue, please go for it!

Attempted solutions

  • Using position: -webkit-fixed
  • Using various variants of transform(0)
  • Setting qa to have height: 100vh, and moving the play buttons div to be a child of qa via JavaScript. This is currently the most promising approach, but is very fragile to properly deal with, and likely requires a lot of care to handle properly. Certain assumptions within the existing JavaScript will likely be broken, and have to be dealt with if this solution is implemented.

Current Workarounds

  • There is no current workaround for the info circle and image zoom, as they aren't as important to deal with compared to the audio buttons.
  • For the audio buttons, the workaround is to hide the audio buttons altogether, and instruct users to set the "tap bottom left" option to "replay audio".

Comments

  • position: fixed seems to work as expected on AnkiWeb Safari, Ankidroid, and Anki's PC client (on Linux, Windows and MacOS). In other words, this is an AnkiMobile unique problem.
  • In general, debugging AnkiMobile is much more difficult than something like Ankidroid or Anki (desktop client), due to its closed source nature. To get the document structure, I usually have to print out document.documentElement.outerHTML into some temporary div.
  • Potentially of importance: For my device, AnkiMobile's HTML starts with: 
    <html class="webkit safari mobile ios ios16 ios16_1 iphone ipad_app js retina orientation_portrait maxw_320"><head>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=10,user-scalable=1">
    Similarly, Safari's HTML starts with: 
    <html lang="en" class="webkit safari safari16 safari16_1 mobile ios ios16 ios16_1 iphone js bg-gray orientation_portrait maxw_320 retina"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  • A potential workaround to fix the audio buttons specifically is to simply move the audio parent element to the last child of the main element. This will make the audio buttons show up below the sentence. However, the user will then have to scroll down if the definition is too long in order to play the audio.

Further reading material

Pictures
@Aquafina-water-bottle Aquafina-water-bottle added the help wanted Extra attention is needed label May 8, 2023
@Aquafina-water-bottle Aquafina-water-bottle added the bug Something isn't working label May 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Aquafina-water-bottle