HTML5 vs iframe transparency

Kimia · December 18, 2015, 4:11pm

When I’ve enabled HTML5 compatibility on the 1.5 client, I noticed iframes in the embedded code would no longer be transparent

To enable HTML5 compatibility (IE11 mode) I have created the following registry keys on the client and I have set their values as indicated.

HKLM\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
XiboClient.exe = (DWORD) 00011000

HKLM\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
XiboClient.exe = (DWORD) 00011000

Is it possible to have the same embedded code be transparent when HTML5 compatibility is enabled and when it’s disabled?

dan · December 21, 2015, 1:19pm

Do you mean that the background image isn’t shown any longer? Can you check you are using a JPG rather than anything else?

Kimia · December 21, 2015, 1:36pm

No, I
mean the background isn’t transparent. The image is shown but the background is white.

dan · December 21, 2015, 1:43pm

Would you be able to provide a screenshot for clarity?

Kimia · December 21, 2015, 1:52pm

dan · December 21, 2015, 3:00pm

And you are certain that your background image is a JPG and that your embedded/webpage item is set to transparent?

Kimia · December 21, 2015, 3:18pm

I am placing the following code in an iframe (please note that before setting the key the transparency was working):

<!DOCTYPE html>
<HTML>
<BODY>
<img src="data:image/png;base64,SOME STRING" border=0 />
</BODY>
</HTML>

dan · December 21, 2015, 3:48pm

Sorry, but you are going to need to answer my question for us to understand what the issue might be.

BUT you shouldn’t have HTML/BODY tags in the embedded HTML, the img tag on its own is sufficient:

<img src="data:image/png;base64,SOME STRING" border=0 />

Kimia · December 21, 2015, 3:50pm

the code I posted is inside an iframe and the iframe is inside the embedded html. As I already explained before enabling HTML 5 this was working.

Kimia · December 21, 2015, 3:52pm

javascript
document.getElementById(‘some iframe’).contentWindow.document.write(“here goes the html content”);

dan · December 21, 2015, 3:57pm

I am aware that it was working before - what I am trying to do is work out why it isn’t working now. Please can you check that your background image is a JPG and that your embedded item is set to transparent?

If both of the above are true, then I don’t think it is anything to do with the code inside Xibo, it is more likely a change in the way IE11 renders the background inside your iframe - you could try setting the background-color property to the page inside the iframe to transparent.

You may look through the temp html files stored in the local player library to see exactly what Xibo is doing - on the windows player we overlay the original background image behind the widget, positioned correctly with an offset. This is because the form control itself doesn’t support transparency.

It would be interesting to know whether the white background is coming from your iframe or from the cached page behind it - changing to a non-iframe embed would test that

Kimia · December 21, 2015, 4:02pm

I will save the image as jpg and let you know what happens

Kimia · December 23, 2015, 2:32pm

I’ve change the img to jpeg and set the background color to transparent as you suggested but still the same issue. To further investigate the issue I created two divisions: one with a transparent background and another with a yellow background. The transparent background showed up as white, the yellow background was ok.
The source code was:

<div style="background-color:transparent;color:red;width:100px;height:100px;border-style:solid;border-width:1px;">This is a transparent division</div>

<div style="background-color:yellow;color:red;width:100px;height:100px;border-style:solid;border-width:1px;">This is a yellow division</div>

I have attached the image.

Kimia · December 23, 2015, 2:41pm

By the way I tried setting the body’s background color to blue and the division’s background color to transparent and the division was transparent but when I set the body’s background color to transparent and the division’s background color to transparent, the division was showing up as white.

dan · December 23, 2015, 3:04pm

We may be talking cross-purposes a little…

From your screenshot I originally assumed that the problem was the white square - which I believe is the Xibo region itself. If you put a text media item in that region instead of your webpage, do you see the flower picture continuing underneath?

Actually, im not sure what we are looking at any more is the background image part of your own webpage?

Perhaps an export of your Layout would clear things up?

Kimia · December 23, 2015, 4:22pm

My original problem was that in 1.5 I was having problems displaying the contents of a transparent iframe image in an embedded module after enabling html 5. (even after changing my image to jpeg).
To prove that the error was not coming from my iframe I made two simple divisions: one with a transparent background, another with a yellow background. the transparent background was showing not displaying properly even after setting the body background to transparent.
I have done what you asked me and I have put a text on my region. I have uploaded the result here.

dan · December 24, 2015, 10:10am

Your background image of the flower, not whatever you were trying to put inside your iframe.

Yeah, that is odd - assuming your background image of the flower is a jpg, then I am not sure why that would be the case. That being said 1.5 is rather old, and I believe it uses a different doctype to later versions. You could try bumping a few versions to see if that helps.