Slow-loading images get collapsed until they load, messing up the Library tab.

When adding a new piece of media to a node, I click the Select button and wait for the Media browser iframe to load, then tab over to the Library tab. The iframe then resizes itself to fit all the displayed images, which I like since I won't have to scroll down to see the Submit and Cancel buttons.

...Except it doesn't resize correctly when the media_thumbnail derivatives are requested for the first time. It takes a while for all the thumbnails to load, and Media's CSS collapses all not-yet-loaded images to 0 height. So the tab's height gets calculated before the images are done loading, and once they finish, it's much too short to contain them.

The reason this happens is on line 76 in css/media.css:

.media-item img {
  height: auto;
  margin-bottom: 10px;
}

Why is this height: auto rule there? Drupal includes the height and width of the image into the <img> tag, so that the space that will be filled with an loaded image gets filled with a placeholder until it's done loading. But this rule overrides that, collapsing the image to 0 height until it's loaded.

Is this intentional? If so, why? If if is intentional, could it please be made optional? For one, it messes up the Library iframe. As far as pure aesthetics goes, I think it looks extremely tacky for images to pop into place as they finish loading, since it causes the browser to continually reflow the text all throughout the page load as more images appear. It reminds me of the bad old days of Web 1.0, when HTML authors didn't have the time or inclination to write the width and height attributes for their <img> tags.