Swiffy output transparent background

Question

I'm just trying to figure out a way to use a swiffy outputted HTML5 animation in an iOS app but I can't drop the grey background. I thought this would be a way to drop animations in and circumvent the storage issues of using a png on a retina iPad display. Now I can't make the background clear. What should I do?

Answer 1

In the code that Swiffy generated, look for backgroundColor and remove it including its value.

Answer 2

None of this worked for me (using ver 5.2), solved by setting new style:

<script>
    var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),swiffyobject);      
    stage.start();
</script>
<style> 
    div {background: url("../bgimg.jpg") repeat scroll 0 0 transparent !important;} 
</style>

Answer 3

According to http://css-tricks.com/override-inline-styles-with-css/ , you can use this CSS hack

div[id=swiffycontainer] > div{
    background-color: transparent!important;
}

Answer 4

Try to locate element with solid background and change it dynamically to transparent, like this:

document.getElementById('swiffycontainer').childNodes[1].style.background = "rgba(255, 255, 255, 0)";

or to none

document.getElementById('swiffycontainer').childNodes[1].style.background = "none";

Answer 5

Add this to your css or something similar.

#containerdivid svg > g > g > rect {
    display: none;
}

Answer 6

Removing the backgroundColor: element did not work for me until I discovered that Google have broken the ability to do this in the current version of the Swiffy runtime. If you also change:

src="https://www.gstatic.com/swiffy/v5.2/runtime.js"

to

src="https://www.gstatic.com/swiffy/v5.1/runtime.js"

at the top of the file you should find that the transparent background works correctly (although, of course, any enhancements in the 5.2 library won't be available any more).

EDIT: It has been pointed out by Michael Prescott that this solution won't work reliably because of a mismatch between the Swiffy converter version and the runtime. An alternative solution that doesn't depend on the presence of the 5.1 exporter is to build on the other solutions suggested here. Try adding the following function to the script. It polls to see when the Swiffy object has installed it's preferred background color and then it replaces it.

(function() {
    var firstNode=document.getElementById('swiffycontainer').childNodes[1];
    //firstNode.style.visibility = "hidden";
    if (firstNode.style.background=="") {
        setTimeout(arguments.callee, 10);
    } else {
        firstNode.style.background = "none";
        //firstNode.style.visibility = "visible";
    }
})();

This doesn't seem to show a glitch when Swiffy first sets a solid background and then it gets replaced. However to be more certain you can enable the commented out lines to hide the first node until the correct transparency has been set.

best regards