Прозрачный фон становится белым при изменении размера изображения

Question

У меня есть HTML-страница, где мне нужно визуализировать 3 изображения, одно поверх друг друга.

<div id="preview">
    <img src="transparent-image">
</div>

со следующим CSS

#preview{
    background-image:url(layer0-image), url(layer1-image);
    background-size:100%, 100px;
    background-blend-mode: multiply;
    width: 820px;
    height: 350px;
}

Первые два изображения смешиваются вместе с помощью свойства CSS background-blend-mode: multiply, поверх этого я помещаю последнее изображение (transparent-image) с прозрачным фоном (представьте фотографию комнаты с площадью стены прозрачный).

Результат именно то, что я хочу, но когда я пытаюсь поставить

#preview{
    width:100%
}

сделать его отзывчивым; Работает без нареканий, но на ios прозрачность теряется. Я тестировал это поведение на Chrome, Safari и Firefox (iOS). Нет проблем на Chrome, Safari, Firefox на OSX, Android, Windows.

Я что-то упускаю? Спасибо за ваше время.

РЕДАКТИРОВАТЬ:

layer0-image и transparent-image - это одно и то же изображение, layer0-image не имеет прозрачности и умножается на layer1-image, а затем поверх этого смешанного изображения я помещаю transparent-image.

Я пытался заменить прозрачное изображение другим, проблема, кажется, заключается в смешении layer0-image и layer1-image, но из-за того, что layer0-image и transparent-image совпадают, сначала я подумал, что проблема прозрачности.

Прозрачность есть, но div #preview имеет высоту 0px при установке в

#preview{
    width:100%;
    height:auto;
}

Не показывая смешивания.

EDIT2:

Я добавляю пример, чтобы показать и повторить ошибку: https://jsfiddle.net/dyqnghdo/3/

Answer 1

Хорошо, я наконец нашел проблему. Наличие:

#preview{
    background-image:url(layer0-image), url(layer1-image);
    background-size:100%, 100px;
    background-blend-mode: multiply;
    width: 820px;
    height: 350px;
}

и затем установка:

#preview{
    width:100%;
}

вызвал ошибку. Чтобы исправить это, я попытался установить:

#preview{
    width:100%;
    background-size:cover, 100px;
}

Проблема исчезла, даже если мне не понятно, почему это происходит.