shape-outside/avif bug

by phloe

HTML

<div class="block">
  <div class="flag png"></div>
  Shape-outside bug sample with a regular png file
</div>

<div class="block">
  <div class="flag avif"></div>
  Shape-outside bug sample with an avif file
</div>

CSS

.block {
  max-width: 600px;
  display: flow-root;
  margin: 2rem auto;
}

.flag {
  width: 450px;
  height: 150px;
  float: right;
  --img: url(https://gist.github.com/user-attachments/assets/56880514-0c12-4d87-812d-c57c6d0018db);
  background: var(--img);
  shape-outside: var(--img);
  shape-image-threshold: 0.3;
}

.avif {
  --img: url(http://phloe.net/shape-outside-bug/flag.avif);
}