Image Occlusions not showing on iOS

[cmwfuchs]

Occluded parts of an image are always displayed on the iOS Anki app.

• BROKEN: AnkiMobile v2.0.83 on iOS 13.3
• BROKEN: AnkiMobile v2.0.83 on iPadOS 13.3
• WORKING: Anki Desktop 2.1.44 (b2b3275f)⁩ on macOS 11.6

@kleinerpirat seems to have the same issue as referenced here: https://forums.ankiweb.net/t/closet-for-anki-official-support/4560/89

Current behavior: (image)

Expected behavior: (image)

Debug information

Unfortunately it is difficult/impossible to properly debug this issue under iOS as using the WebViewInspector is not possible.

Things I have tried/checked so far but didn't work:

• Closet works (other Closet features work fine)
• Pasting the contents of __closet-0.5.3.css into the Styling section of the card as @kleinerpirat suggested that it might be a CSS issue
• Testing whether @kleinerpirat's "Incremental Image Occlusion Sample" as I figured the issue might be my Closet setup
• Inserting an alert("Test") after the part where I install the closet.browser.recipes.rect.show({ tagname: "rect"}), into the filterManager to check whether the setup script runs into an error of some kind
• Checking whether changing all occlusions to recth changes anything

If there is anything I can assist you with in fixing this bug please let me know!

Kind regards!

[kleinerpirat]

Pasting the contents of __closet-0.5.3.css into the Styling section of the card as @kleinerpirat suggested that it might be a CSS issue

Sadly, I don't remember what the exact issue was back then, but it was certainly some script error, no CSS issue.
IO was working for me the last time I had access to an iOS device.

Unfortunately it is difficult/impossible to properly debug this issue under iOS as using the WebViewInspector is not possible.

Debugging templates on AnkiMobile was always a bit cumbersome. I used to place a <div id="log"></div> at the bottom of my template and then I used my own log function instead of console.log:

function log(txt) {
   document.getElementById("log").innerHTML += `${txt}<br>`;
}

You could then wrap any script with a try...catch block and output errors with the log function above. E.g.:

try {
   // code you want to check
} catch (e) { log(e); } 

The output is plain text, but it's better than nothing. Maybe you'll find an error that way, so we can help you solve this issue.

[hgiesel]

Another idea that helped me before:
The closest thing to iOS web view you can get on a desktop is Safari. So you could try it out on AnkiWeb on a Safari browser.

[cmwfuchs]

Thanks for your suggestions and quick responses! By implementing a wrapper around the console.log/error/warn-functions that outputs the console messages into the card I was able to track down following error message on iOS:

TypeError: undefined is not a constructor (evaluating 'new globalThis.ResizeObserver((function(){return r.resize()}))')

AnkiWeb on Safari 15.0 fails with

[Error] Failed to load resource: the server responded with a status of 404 () (__closet-0.5.3.js)

Weirdly enough, AnkiWeb works flawlessly under Firefox (95.0.2).

In case anyone from the future wants to debug Anki on iOS here's my version of this wrapper:

I added <div id="log">Log Output: </div> and this script to my card template (both via the Asset Manager)

if (typeof console  != "undefined") 
     if (typeof console.log != 'undefined')
          console.olog = console.log;
      else
          console.olog = function() {};
  
  console.log = function(...args) {
  for (let i=0; i<args.length; i++) {
      console.olog(args[i]);
      document.getElementById('log').innerHTML += ('<p>' + args[i] + '</p>');
  }};
  console.error = console.debug = console.info = console.warn =  console.log;

[crykn]

Hey @cmwfuchs,

I've recently encountered the second issue you mentioned in another context. The Failed to load resource error is caused by the fact that WebKit's implementation of dynamic Javascript imports doesn't seem to respect <base href> tags (see here for the corresponding bug report on WebKit’s bug tracker). This makes closet look for its Javascript files in the wrong location. The solution is pretty simple: the user.js script needs to be adapted as shown here.