How can I prevent flicker in a reactive background image change?


#1

I have a div whose background image changes depending on a helper’s return. Right now when there is a change it goes white for a millisecond or so and then shows the new image. How can I make the image transition more pleasing?

(If I were changing the image on click, instead of as a result of a helper’s return, then I would do a jquery fadeIn or something like that.)


#2

What UI framework are you using? Vue? React? Blaze?


#3

Also, this should work with CSS:

transition: background-image 1s ease-in-out;

But you’ll have control by handling it directly in your UI framework


#4

I’m using the Blaze framework.


#5

Cool, didn’t know you could actually transition background images that simply! :grinning:


#6

Take a look at here. It’s always amazing what you can do with CSS3. I’m not sure if Edge and others do support those transition, thought.

@webmagnets does that solve your problem?


#7

I put this in main.html

<body>
<style>
	body {
		transition: background-image 1s ease-in-out;
	}
</style>
{{>layout}}
</body>

It doesn’t seem to be working like what you linked to.

It still transitions abruptly.

UPDATE:

It is working now with:

div.cover {
			background: url({{backgroundImgSrc}}) no-repeat center center fixed;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			transition: background-image 1s ease-in-out;
		}

thanks!!!


#8

What you’ve done there is add a transition to the background of <body>, not the div.
I made a fiddle to test it myself :slight_smile: https://jsfiddle.net/Herteby/xLejeeej/