CSS странность от переполнения: скрыто

Question

По крайней мере, я думаю, что это из-за скрытого переполнения.

У меня есть куча div в виде встроенных блоков.У каждого из них есть изображение, которое больше, чем набор 50х50, со скрытым набором переполнения.Иногда при загрузке изображения выглядят не совсем правильно:

Но если я щелкну правой кнопкой мыши, чтобы проверить элемент, он сразу установится (Chrome).Safari имеет похожее поведение.

Ожидаемый результат:

HTML:

<div id="thumb_overlay">        
            <div class="active">
                <img src="1.jpg" data-src="a.jpg">
            </div>

            <div>
                <img src="2.jpg" data-src="b.jpg">
            </div>

            <div>
                <img src="3.jpg" data-src="c.jpg">
            </div>


            ... etc
</div>

css:

#thumb_overlay {
position: absolute;
bottom: 5px;
right: 5px;
text-align: right;
background-color: rgba( 255, 255, 255, .5);
padding: 5px 5px 0 5px;
}

#thumb_overlay > div {
display: inline-block;
width: 50px;
height: 50px;
overflow: hidden;
}

#thumb_overlay img {
opacity: .9;
cursor: pointer;
}

Answer 1

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