Background color in IFRAME

27 March 2018 09:31

In my web application, I have the Blend4Web player in an iframe:
<iframe src="/static/character_viewer.html" class="embed-responsive-item" id='entityViewer' allowfullscreen></iframe>

When the page with the iframe is loaded there is a flicker between the initial black background color of the iframe (or maybe the canvas) and the final background color (which is white) resulting in quite an annoying user experience. I will link to an animated GIF so that the issue is more apparent (easier to show than explain):

Can anyone help me to avoid this flicker between the initial black background color and the proper background color (which is white)? I've tried several CSS-specific approaches (e.g., setting the background color on the IFRAME's html and body tags, etc).

I understand that this is probably not a Blend4Web-specific issue.

I'm using Chrome on Linux.

Any help on this matter would be greatly appreciated.

27 March 2018 15:25
I've tried to reproduce but without success. I've attached a project with my attempt. See test.html.
What I've done is just used template project, commented the preloader related code and included an iframe in test.html.

Maybe your have your own preloader which caused such behavior?
Alexander (Blend4Web Team)
27 March 2018 18:49
Hi Alexander,

Thanks for your help and the attached file. I was able to fix the issue by carefully examining the JavaScript you provided. Specifically, the issue was due to the "alpha" configuration parameter being set to "false":

exports.init = function() {
        canvas_container_id: "entity_canvas_container",
        callback: init_cb,
        alpha: false,
        physics_enabled: false,
        autoresize: true,
        quality: m_cfg.P_HIGH

Thanks for your assistance. Removing the "glitch" makes a huge difference :)

Please register or log in to leave a reply.