Jump to content


crossfade background causes SVG text to fade

Moderator Tag

Recommended Posts

I bet there's a good explanation for this and probably a much better way to accomplish a background crossfade but I'm seeing some strange behavior. 


In the codepen, I have an SVG with 2 foreignObjects each containing a div with a background image as a base64 image URL. Overlaying that is a group element with a text>tspan with some text in it.


I've got a simple autoAlpha tween on the top-most background div from 1 to 0 over 3 seconds and at the same time, the lower-most BG goes from 0 to 1. 


The crossfade is a little wonky but what's weird is the text is affected by the fade in Chrome. Firefox seems to handle it fine but I need it to work in Chrome. I can set either of the backgrounds to zero opacity and the text looks fine. 


I'm wondering if it has something to do with positioning because if I add any kind of position setting to the div's with the backgrounds I lose the text behind the background divs.


Any idea why this might be happening?

See the Pen GrrvWa by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Ok, I think I figured out a better way to handle this since it's just a background crossfade that I'm after. 


See the Pen pRRMjj by swampthang (@swampthang) on CodePen


Transition (crossFade) works fine in WebKit but not so smoothly in Firefox. If anyone has an idea on how to fix that in FireFox please speak up. Personally, I'm not worried about FF for my needs.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.