crossfade background causes SVG text to fade

[swampthang 112 Likes (Specialist)]

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

[swampthang 112 Likes (Specialist)]

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.

[swampthang 112 Likes (Specialist)]

A little more complete example. 

See the Pen ggmwoJ?editors=1010 by swampthang (@swampthang) on CodePen