The issue is image and occulusion don’t show up when reviewing the card.
<style>
#image-occlusion-container img{
position: inherit;
}
</style>
and, it’s fixed!
You shouldn’t need to do that. If you remove that code and try again without any add-ons, does that help?
I tried that first because it’s the easiest way, and that just doesn’t work. It’s hard to determine the cause of problem, so using code is helpless move, and I had to.
Hope that it only happens to me.
I have the same issue. I also tried it with add-ons disabled. Tested in 23.10 and 23.10.1
Hope my solution helps.
It looks like this is a Qt5 issue. I will fix this in the next update, though I recommend switching to Qt6 if you can.
On my system (OS Catalina Macbook Pro 2012 mid), while the image does appear after adding the above css, the occlusion boxes are misaligned on the image when previewed. The image also doesn’t resize to fit the deck UI.
AnkiDroid issue as well:
Interestingly, the image does appear and auto-resize when the card is viewed on Android. However, I get the following error: Error loading image occlusion. Is your Anki version up to date? ReferenceError: anki is not defined". Looking at the tempate, the error message is being triggered by the following:
<script>
try {
anki.imageOcclusion.setup();
} catch (exc) {
document.getElementById("err").innerHTML = `Error loading image occlusion. Is your Anki version up to date?<br><br>${exc}`;
}
</script>
You are right, the above CSS has an issue where the masks are misaligned if the image is vertically long.
The issue with the Qt5 version where the image occlusion cards do not show up in the reviewer or previewer has already been fixed in the latest development code. I would recommend using the Qt6 version until the next version is released. If you need to use the Qt5 version because of compatibility issues with add-ons, video driver issues, etc., try the workaround below.
Add the following to the beginning of the <script></script> block:
function waitForImage() {
const img = document.querySelector("#image-occlusion-container img");
return new Promise((resolve) => {
if (img.complete) {
resolve(img);
} else {
img.addEventListener("load", () => resolve(img));
}
});
}
function setContainerSize(img) {
const container = document.querySelector("#image-occlusion-container");
const maxWidth = container.parentElement.clientWidth;
const maxHeight = document.documentElement.clientHeight * 0.95 - 40;
const ratio = Math.min(maxWidth / img.naturalWidth, maxHeight / img.naturalHeight);
container.style.width = `${img.naturalWidth * ratio}px`;
container.style.height = `${img.naturalHeight * ratio}px`;
}
Then replace the following line:
anki.imageOcclusion.setup();
with:
if (CSS.supports("aspect-ratio: 1")) {
anki.imageOcclusion.setup();
} else {
waitForImage().then(img => {
setContainerSize(img);
anki.imageOcclusion.setup();
});
}
This workaround will conflict with Anki’s internal scripts in the next version, so be sure to revert to the default after updating to the next version.
I am unable to install the Qt6 version on my 2012 Macbook Pro (OS Catalina). Thanks for the quick fix! Your Javascript workaround works. I look forward to the next release.
Note: While it works for the desktop app, your javascript hack doen’t work for Ankidroid. Just the image appears, no masking.
I don’t use mobile version of Anki, so not sure if how to fix it.
I just tested a few IO cards with AnkiDroid 2.17alpha6 and they seem to display properly both with the default Image Occlusion notetype and the one with the modifications mentioned above.
Thanks for heads up on the AnkiDroid 2.17alpha6 version, which works, unlike the 2.16.5 version I had installed from the playstore. When do you think the desktop version, with the bug you fixed, will be released/built for download?
I don’t know when the next version will come out.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.