Transparent background becomes white on image resize

Question

I have an HTML page where I need to render 3 images, one on top of each other.

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

with the following CSS

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

The fist 2 images gets blended together using the CSS property background-blend-mode: multiply, on top of this I put the last image (transparent-image) with a transparent background (Imagine a photo of a room, with the wall area being transparent).

The result is exactly what I want but when I try to put

#preview{
    width:100%
}

to make it responsive; It works flawlessly, but on ios the transparency is lost. I tested this behaviour on Chrome, Safari and Firefox (iOS). No problem at all on Chrome, Safari, Firefox on OSX, Android, Windows.

Is there something I'm missing? Thanks for your time.

EDIT:

layer0-image and transparent-image are the same image, layer0-image has no transparency and gets multiplied with layer1-image then on top of this blended image I put transparent-image.

I tried to change transparent-image with another one, the problem seems to be the blending between layer0-image and layer1-image, but due to the fact that layer0-image and transparent-image are the same, at first I thought there was a transparency problem.

The transparency is there, but the div #preview has 0px height when put to

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

Showing no blending.

EDIT2:

I'm adding an example to show and replicate the error: https://jsfiddle.net/dyqnghdo/3/

Hmm... It works on OSX and on mobile safari not? I don't understand it. Interesting question. — Samuel Tulach, Mar 13 '17 at 15:30
Exactly, works fine on Safari (but even on Chrome, Firefox) using OSX and on Chrome and Firefox on Android.When I test it on iOS what I see is the image transparent-image with no transparency, losing the effect of seeing through the wal. — lazharous, Mar 13 '17 at 15:35

score 0 · Answer 1 · answered Mar 13 '17 at 17:02

Ok, I finally found the problem. Having:

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

and then setting:

#preview{
    width:100%;
}

casused the error. To fix it I tried setting:

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

The problem is gone even if it's not clear to me why it was happening.

Transparent background becomes white on image resize

1 Answers1