QtWebEngine does not play nicely with flex boxes and scaling SVGs

ring · May 7, 2025, 1:26am

I’m currently creating a card template, however, the rendering on the exact same card and exact same template differ on Anki, the correct card version can only be seen after updating specific fields and forcing a re-render. I can replicate this issue on both MacOS and windows.

I’m on version 25.02.4 of Anki on both platforms.
This issue also appears on mobile, I’m on the latest iOS version as of writing this.

Cards render like this initially.

However, if I edit, then remove the image. Let it render, add the image back in again, I get…

I’m using Flexboxes to create responsive behavior between mobile and desktop.

I found 2 issues:

Layout. Debugging it further with inspect element tools, I found that the div container on the bottom went “outside” of the overall div during the first render. Yet, after the 3 steps above, that div container went back to it’s expected location. I also found out that the rendering issue can also be “fixed” for that card by editing any field.
SVG resizing doesn’t get triggered properly. SVGs show up in their original size, after performing the 3 steps above, the SVGs will go to their specified size within the css stylesheet.

I’ve tried:

wrapping the svg in a smaller container, forcing it’s size
- this doesn’t work, the svg simply stays big and spills out of the container
stacking things with !important for forcing their sizes
- size was not respected by the svg
using css tricks to reload the page through ztransformations
- svg still alrge

mausprz · May 13, 2025, 3:15am

I’m more inclined to think this error is related to your CSS declarations than to Anki (on any of its platforms) or QtWebEngine.

An easy way to verify this is to clone your template in an HTML file, including its CSS styles, and directly open it in any major browser to see if it persists.

Another alternative that occurs to me, is that you try to recreate your template in a public development environment (like codepen.io) so we can take a look at it and help you to debug.

ring · May 17, 2025, 4:17am

Thanks so much! I tried to simplify the css a bit but I was not able to fix this issue still… I’m not the best at CSS so there def could be an issue in here.

Here’s the codepen, the layout looks fine so far within the codepen view.

Seems like I’m unable to post links, so here’s the html and css, this card has no JS.

html:

<br>
<div class="back-box">
  <div class="frequency-badge">{{Frequency}}</div>
  <div class="audio">{{Audio}}<br>{{SentenceAudio}}</div>
  <div class="word">
    <span class="furigana">{{Reading}}</span>
    <span class="word-text">{{Word}}</span>
  </div>

  <input type="checkbox" class="toggle" id="toggleCheck">

  <div class="flexgrid">
  <div class="main-image">
    <div class="blurwrap {{Tags}}">
    <label for="toggleCheck">{{Picture}}</label>
    </div>
  </div>
  
	<div class="sen-accent">
  <div class="back-sentence">
    <div class="blurwrap {{Tags}}">
    <label for="toggleCheck">{{Sentence}}</label>
    </div>
  </div>
  <div class="accent">{{PitchAccentPosition}}<br>{{PitchAccentGraph}}</div>
	</div>

  <div class="definition-container">
    <div class="main-def">{{furigana:PrimaryDef}}</div>
    <div class="secondary-def">
      <details>
        <summary>secondary def</summary>
        {{SecondaryDef}}
      </details>
    </div>
  </div>
  </div>

</div>

css:

@font-face {
  font-family: myfont;
  src: url('UDDIGIKYOKASHON-R.TTC');
  font-weight: normal;
}

@font-face {
  font-family: myfont;
  src: url('UDDIGIKYOKASHON-B.TTC');
  font-weight: bold;
}

body {
  font-family: myfont;
  text-align: center;
  display: flex;
  justify-content: center;
}

img {
  display: block;
  max-height: 350px;
}

.card {
  font-size: 32px;
}

.definition-container {
  font-size: 22px;
}

.back-box {
  width: auto;
  max-width: 800px;
}

.audio {
  position: absolute;
  top: 14px;
  left: 14px;
  opacity: 0.6;
}

.replay-button svg {
  width: 25px;
  height: 25px;
}

.back-sentence {
  writing-mode: vertical-rl;
  text-align: left;
  padding: 20px 15px;
  margin-left: 20px;
  margin-bottom: 15px;
  border-radius: 25px;
  box-shadow: 0 0 5px #7c6f64;
  max-height: 400px;
}

b,
strong {
  color: #FFA313;
}

.word {
  font-size: 50px;
}

.furigana {
  display: block;
  font-size: 0.5em;
  line-height: .5;
  color: #aaa;
}

.toggle {
  display: none;
}

.nsfw {
  filter: blur(25px);
  transition: filter 0.3s ease;
  cursor: pointer;
}

.toggle:checked ~ .flexgrid .nsfw {
  filter: blur(0px);
}

.frequency-badge {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
}

.secondary-def {
  font-size: 0.65em;
}

.accent {
  font-size: 0.52em;
}

/* grid setup to allow for right alignment on desktop */
.flexgrid {
  display: grid;
  grid-template-columns: auto auto;
  position: relative;
}

.main-image {
  border-radius: 25px;
  display: flex;
  justify-content: center;
	align-self: start;
	grid-column: 1;
  grid-row: 1;
}

.sen-accent {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}

.definition-container {
  grid-area: box3;
  padding: 10px 0;
  grid-column: 1;
  grid-row: 2;
}

@media screen and (max-width: 768px) {
  .flexgrid {
    grid-template-areas:
      "box1"
      "box2"
      "box3"
      "box4";
  }

  .accent {
    position: absolute;
    right: 0;
    top: 100%;
    font-size: 0.55em;
  }

  .main-image {
    grid-area: box1;
  }

  .definition-container {
    grid-area: box3;
  }

	.sen-accent {
    grid-area: box2;
  }

  .back-sentence {
    writing-mode: horizontal-tb;
    text-align: center;
    padding: 10px;
    position: static;
    border-radius: 10px;
    margin: 10px 0;
    box-shadow: 0 0 10px #7c6f64;
  }

  .card {
    font-size: 24px;
  }

  .definition-container {
    max-width: 90%;
  }
}

mausprz · May 17, 2025, 5:31am

Too bad. If you wish, please share just your codepen username (and optionally your pen id) so I can take a look later.

Or, alternatively, try wrapping the url between backticks, for example: https://codepen.io/[username]/full/[id]

ring · May 17, 2025, 6:37am

https://codepen.io/Retying7716/pen/vEEMBbV

mausprz · May 18, 2025, 12:57am

I checked the file you created at CodePen and it seems to be at best incomplete. Not only did you leave out any dummy text where the Anki Field Replacements should go, but there’s also no sample image I can debug with.

The CSS declarations also appear to be incomplete; for example, I couldn’t find any background-color declaration in the entire file even though your screenshot below seems to be around #2c2c2c or so.

I tried wrapping everything inside a <body><div class="card"></div></body> to try to get closer to the result you showed us, but that didn’t make any difference. The Pen doesn’t resemble the screenshots you uploaded at all.

I’m afraid there are so many missing gaps there that I won’t be able to help you like this.

Anon_0000 · May 18, 2025, 1:12am

That’s not OPs fault. Anki automatically creates this background if night mode is active:

mausprz · May 18, 2025, 2:48am

My bad, I certainly slipped up by assuming these were styles declared by OP in an external file based on the color declarations in b, strong and .furigana elements being dark-mode-agnostic (thank you for pointing that out).

What remains true is that, although I consider myself experienced at understanding the flexbox model, I find it impossible to replicate the given bug and find a proper solution.

EDIT: Another somewhat cumbersome possibility is that OP tries exporting a card from his collection in .apkg file format so we can debug it?

Anon_0000 · May 18, 2025, 12:08pm

I agree, this might be the best thing to do. It isn’t actually cumbersome though. Just go to the browser, select the card, click export and that’s it.

I tried to replicate the issue OP is having with the given html and css but it appears to be working fine for me. Though I’m not using any addons (I believe things like the “graph” are generated by addons) and I was just using latin strings as placeholders. Not sure why any of these things would interfere with the image though, which is not only working fine, but also responsive on my system.

Topic		Replies	Views
Possible occulusion issue on ver 23.10, and the solution Help	14	886	December 23, 2023
Change width of field depending on content Card Design	3	375	February 5, 2024
Bitmap images embedded into svg images don't show on iOS Help	11	137	November 1, 2024
Content of SVG elements is ignored in determining if the card is unique Help	2	48	December 17, 2024
Anki is unable to display any SVG images on my computer Help	13	1517	September 24, 2023

QtWebEngine does not play nicely with flex boxes and scaling SVGs

Related topics