CSS :has Query not working on AnkiMobile only

AnkiMobile (iPhone/iPad) Help
1

Hey,

the following CSS query for Anki cards for some reason doesn’t work on the AnkiMobile iPadOS.
I’m using it to display the furigana characters to my Japanese vocabulary by checking a invisible input field and since this works fine on Desktop, AnkiDroid & AnkiWeb (on iPadOS), I’m rellay a bit confused why it cease to do so on iPadOS 26.1 on my iPad Air 2022 and the 25.09 based AnkiMobile app…

Here’s the card structure & CSS that’s not working:

<div class="furihide back"> 
  <label> 
    <input type="checkbox" /> 
    {{Back}} 
  </label> 
</div>

input {
  display: none;
}

.furihide:has(input:checked) ruby>rt {
  display: revert;
}
.furihide ruby>rt {
  display: none;
}

Here’s an exemplary (raw) content of the Back field: <p>〜<ruby>行<rt>い</rt></ruby>き（e.g. このバスは<ruby>駅<rt>えき</rt></ruby><ruby>行<rt>い</rt></ruby>きです。）</p>

Do you have any ideas why this doesn’t work as expected on AnkiMobile? I’ve already filed a bug report on the official AnkiMobile tenderapp instance, but the moderator directed me towards this forum…

2

What problem behavior or symptom are you seeing? I tested your card on AnkiMobile 25.09, and I seem to see correct behavior?

  • As is, the hidden checkbox is unchecked and the ruby characters are not displayed, as expected.
  • If I make the hidden checkbox checked (input type="checkbox checked />), then the ruby characters are displayed, as expected.
  • If I make the checkbox not hidden (by removing the CSS that hides it), then ruby characters are displayed when I check the checkbox and not displayed when I uncheck the checkbox, as expected.

My testing was done by previewing the card from the AnkiMobile browser. I didn’t view the card during an actual review.

I see the same correct behavior when previewing the card on Anki desktop on Mac. (My workflow is to create and make changes to the card on Anki desktop, sync it to AnkiWeb, and then sync it to AnkiMobile for testing.)

1 Like
3

Hey, thanks for the fast response!

The issue is that I can’t check the input and therefore view the ruby characters in an actual review and only on AnkiMobile…

4

I performed the same tests during actual review on AnkiMobile (using a Filtered Deck), and I still do not see any problems. I saw the same correct behavior as before. Everything worked as expected.

What do you mean by “I can’t check the input”? Do you mean that you can’t see the checkbox? If so, that is expected behavior because you intentionally hid the input via CSS.

5

Well, hat’s really weird.
No worries, I meant “checking the invisible checkbox to see the ruby chars”.

I did some further testing and can confirm I can check the checkbox using a physical mouse with my iPad, as visible in the following screencast: https://drive.proton.me/urls/CG4RV74Y1C#BJQnoPCjVu-j
This finding was an accident, since I wanted my taps to be visible in the screencast (still not sure how to make this happen though). The last 10s of the video or so is me trying to tap on the same places my clicks just were recognized with the mouse…

6

Thank you for the video. I now see what actions you are performing. You are clicking on the label text itself, not the checkbox (which is hidden).

  • On desktop Anki, clicking on the label text somehow causes the hidden checkbox input to become checked, resulting in the ruby characters being unhidden.
  • On AnkiMobile, touching the label text doesn’t seem to cause the hidden checkbox input to become checked, resulting in the ruby characters remaining hidden.

I note that this clicking-label-text-doesn’t-toggle-checkbox behavior on AnkiMobile occurs regardless of whether the checkbox input is hidden or not. I’m not sure whether this behavior is a bug or if it might be an acceptable variation in behavior because of the touchscreen nature of the iOS browser.

I found a workaround:

  1. Press on the label text long enough for some text to be selected.
  2. Click a different part of the label text.

Edit: Added:

I found another workaround:

  1. Change <label> to <label onclick="">.
7

Another workaround is to use :active or :hover to temporarily show the furigana.

8

Same here…

No, I don’t think so. I really don’t have much experience with the Apple-Safari-Webkit ecosystem, but at least on Safari clicking on the label works.
Might this be caused by the “tap” features the AnkiMobile app has?

This fixed it for me, thanks a lot! Now I can go practice my vocabulary on my iPad again! :slight_smile:

9

If that’s the case, you can add the special class tappable to an element to tell AnkiMobile/AnkiDroid to not trigger gestures when tapping on it. (Source)