Firefox: Img с 2х srcset указанный имеет странный интервал, когда внутри поплавка

Question

У меня есть HTML так:

<div id='container'> 
    <div class='left mr1'> 
    <img src='https://placehold.it/100x50' srcset='https://placehold.it/200x100 2x'> 
    </div> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div> 

CSS вот так:

#container { 
    width: 400px; 
    background: #eee; 
    padding: 10px; 
} 

.mr1 { 
    margin-right: 10px; 
} 

.left { 
    float: left; 
} 

В Firefox только, если смотреть на «сетчатку ", это приводит к .leftdiv (который не имеет width) с двойной шириной. Я не могу воспроизвести это в любом другом браузере.

Скриншот:

Воссоздал в this pen.

Answer 1

Я могу подтвердить ошибку.

Это простейшее решение. Это устанавливает максимальную ширину для всех изображений в их natural width, что, как оказалось, является правильным размером. Но это означает, что никакие изображения не могут простираться за их естественную ширину на вашем сайте, что вам может понадобиться. То есть это следует использовать с осторожностью и будет отменять любое объявление максимальной ширины на изображениях на вашем сайте.

$('html').imagesLoaded(function() { 
    $('img').each(function() { 
     // Exclude SVG images. 
     if (this.src.split('.').pop().toLowerCase() !== 'svg') { 
     var imgWidth = this.naturalWidth; 
     $(this).css('max-width', imgWidth); // Set max width of element to the natural width of the img specified in the src tag. This means that srcset images cannot swell size the image as in FF. 
     } 
    }); 
    }); 

Вы будете нуждаться в imagesLoaded plugin, так как размер Img элементов не известно до тех пор, после их загрузки.

Примечание: здесь я использую jQuery. Но это может быть легко достигнуто с помощью ванильного JS.