Chrome / Edge don't resize container containing responsive images

Question

How to make the browser redraw / resize the surrounding <div> for scaled SVGs like it does with other images?

If you place an image inside an absolute positioned element, it's width or height will adapt accordingly, like this:

<div style="position: absolute; height: 40%; background: blue;">
  <!-- square transparent GIF -->
  <img 
    style="height: 100%; width: auto; background: #0f0; opacity: 0.6"
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  >
</div>

and this also works if you use an SVG, –except– if you resize the browser in Chrome/Edge. It works in Firefox.

Try resizing the fullscreen demo in Safari, Chrome, Firefox

<div style="position: absolute; height: 40%; background: blue;">
  <!-- square transparent GIF -->
  <img 
    style="display: block; height: 100%; width: auto; background: #0f0; opacity: 0.6"
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  >
</div>

<div style="position: absolute; height: 40%; top: 50%; background: blue;">
  <!-- square transparent SVG -->
  <img 
    style="display: block; height: 100%; width: auto; background: #f00; opacity: 0.6"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'></svg>"
  >
</div>

[Edit1]: Ok, on writing the example code, this no longer turned up in Safari, but in Chrome on both examples. The problem is the same as observed on a more complex code in Chrome though.

[Edit2]: So this is possibly no SVG problem, as it appears on using raster images as well

[Edit3]: Edge still having the same problem, urg.

(transparent GIF via Smallest data URI image …)

Answer 1

Ok, so this was related to Chrome: SVG container not rescaling responsively and the (bad, bad!) fix is seemingly to force an animation redraw like this:

.redraw {
  animation: redraw 1s infinite;
}
     
@keyframes redraw {
  from { min-width: 1px; }
  to   { min-width: 2px; }
}

[FIX:] Try resizing the fullscreen demo in Safari, Chrome, Firefox

<div class="redraw" style="position: absolute; height: 40%; background: blue;">
  <!-- square transparent GIF -->
  <img 
    style="display: block; height: 100%; width: auto; background: #0f0; opacity: 0.6"
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  >
</div>

<div class="redraw" style="position: absolute; height: 40%; top: 50%; background: blue;">
  <!-- square transparent SVG -->
  <img 
    style="display: block; height: 100%; width: auto; background: #f00; opacity: 0.6"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'></svg>"
  >
</div>