'Transparent background iframe only working in Firefox and not Chrome or Safari

I'm trying to get a transparent background on an iframe, but I only am able to get it working on firefox. I have tried all the different ways of getting it to work, but this is the css that I'm using now on the page that is in the iframe:

html, body {
    background: linear-gradient(top, blue, transparent);
}
This is the result in Firefox(and the desired result): And this is what I get in chrome of safari:

The iframe that I add using JavaScript:

<iframe class='repoImg' allowtransparency='true' frameborder='0' src='objectpreview.html?objecturl="+ element +"' title='3D model of "+ element +"'>

Is there a way to get the desired result across all browsers?

htmlcssgoogle-chromesafari


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions