SOLVED | WebP images skip CSS transitions in card editor (driver-dependent)

Anki Card Design
1

UPDATE

uhggggg. After wasting too much time on this, I noticed that my amd drivers were 4 years outdated. An update later and voila, the behavior matrix for my notetype looks something like this:

Driver JPG (preview) JPG (editor) WebP (preview) WebP (editor)
OpenGL :white_check_mark: works :white_check_mark: works :cross_mark: skips :cross_mark: skips
Vulkan :white_check_mark: works :white_check_mark: works :white_check_mark: works :white_check_mark: works
Direct3D :white_check_mark: works :white_check_mark: works :white_check_mark: works :white_check_mark: works


I’ll leave this here in case someone is as braindead as me.






Specs-

Anki ver. 25.07.5, problem observed on mac bootcamp with amd radeon graphics drivers.

Desc-

CSS opacity/visibility transitions on dynamically created elements are skipped (jump instantly to final state) depending on if the image is jpeg or webp, what anki video driver is used (OpenGL, Direct3d, Vulkan), as well as if the card is viewed in the editor or the preview. Importantly, the transitions are only skipped on the first click, and all subsequent clicks function properly. Below, when I say “skips,” I mean it skips on the first click, and then works.

Behavior also seems to vary between card templates (I tested two). My custom template has transform: translateZ(0) and will-change: transform, opacity on source images. Other than that, I couldnt personally find much else that would differences (the js for transitions is identical, while css is extremely similar.)

Behavior matrix (My card template)-

Driver JPG (preview) JPG (editor) WebP (preview) WebP (editor)
OpenGL :white_check_mark: works :white_check_mark: works :cross_mark: skips :cross_mark: skips
Vulkan :white_check_mark: works :cross_mark: skips :white_check_mark: works :cross_mark: skips
Direct3D :white_check_mark: works :cross_mark: skips :white_check_mark: works :cross_mark: skips

Behavior matrix (Lapis Simplified)-

Driver JPG (preview) JPG (editor) WebP (preview) WebP (editor)
OpenGL :white_check_mark: works :white_check_mark: works :cross_mark: skips :cross_mark: skips
Vulkan :white_check_mark: works :white_check_mark: works :cross_mark: skips :cross_mark: skips
Direct3D :white_check_mark: works :cross_mark: skips :white_check_mark: works :cross_mark: skips

Steps to reproduce

  1. Download lapis simplified note type (Release Lapis Simplified 1.1.0 · friedrich-de/lapis-simplified · GitHub)
  2. Add a WebP image to a card
  3. Click the image in the card editor to trigger the modal
  4. Transition is skipped — element jumps to final state instantly

Devtools findings

Inspected both preview and editor webviews via QTWEBENGINE_REMOTE_DEBUGGING. Both environments show identical computed values:

  • transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s
  • transitionDuration: 0.3s, 0.3s
  • Starting opacity: 0 is correct at the moment the active class is added
  • getAnimations() returns [] in both contexts

Despite identical DOM/CSS state, the transition plays correctly in preview and is skipped in the editor. This suggests the issue is below the JS/CSS layer, likely in how the editor webview’s Qt compositor handles WebP GPU textures differently from the preview webview context.

Notes

  • Images are local (Anki media folder)
  • No JS workaround found. decode(), requestAnimationFrame(), will-change, translateZ(0), blob URL conversion, and canvas redraw approaches were all tested without success

In the end, I went down this rabbit hole because I wanted to convert all of my jpg images to webp and save ~30% storage space. alas, this has turned out to be a massive headache, and I plan to simply stick with jpg. (unless theres a quick 'n easy fix for this issue 🤑, but I doubt that.)
1 Like