Bug in transparent background

Hello, in version 4.03 (664) the “make background transparent” checkbox does NOT make the background transparent. Instead, it assigns a white background.

The generated JS contains “background-color:#EEE;” which causes the problem.

Full snippet containing the white (#EEE) background is as shown:
if(shouldShow == true) { if(loadingDiv == null) { loadingDiv = document.createElement("div"); loadingDiv.id = loadingPageID; loadingDiv.style.cssText = "overflow:hidden;position:absolute;width:150px;top:40%;left:0;right:0;margin:auto;padding:2px;border:3px solid #BBB;background-color:#EEE;border-radius:10px;text-align:center;font-family:Helvetica,Sans-Serif;font-size:13px;font-weight:700;color:#AAA;z-index:100000;"; loadingDiv.innerHTML = "Loading"; mainContentContainer.appendChild(loadingDiv); }

test file attached keyAir.hype.zip (33.4 KB)

I’m noticing an odd lack of consistancy as the prior issue went away but now I can not get the original generated script values to happen. I’m trying to set an element as displayed on overflow but the code will not generate the required results.

I think I liked the prior problem of the white background because at least that generation of script allowed a manual change that would address the overflow and background color.

I’ll keep hacking away and look forward to the file exporting as before. Or I’ll just use the original version.

keyAir_r2.hype.zip (32.2 KB)

I'm curious context are you using this in?

This is only for the "loading" div, as set via the Show loading indicator checkbox in the Document Inspector. (Also note that #EEE is not white...?)

The Make background transparent does two things:

  • It directs scenes to not have a background-color as part of their style.
  • It does not set a background-color property on the body, which would normally be set to the first scene's background color in the HTML head (above where you edit) during export. White is therefore the browser default.

If you want an actual value of transparent, you can edit the Head HTML via the document inspector and add:

<style>
body {
    background-color: transparent;
}
</style>

Sidenote: the checkbox just used to be called "Draw scene backgrounds" but we found that users kept asking how to their document "transparent" so we changed the wording, though now I get why one would think we'd set the transparent color instead of no color :slight_smile:.

Hello,
Context is that the scene is over a colored background:
https://bestfreewebsitegraphics.com/
I believe the “bug” is more the lack of consistency as I am trying to find a consistent method to generate code I can then manipulate if there are no settings in the Hype app.

My goal currently is to make either the whole Hype element allow the overflow to be visible OR even just the Nuclei element.

Thanks for your reply and details regarding the background transparency was only for the loading indicator. I’ll do a few more exports to fully understand that aspect.

I had to force the overflow to visible which achieved my goal.

     .HYPE_scene {
        overflow:visible !important;
    }
3 Likes

Gotchya - glad you were able to figure it out!