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

help
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

3 Likes
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?

1 Like
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!!!

1 Like
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/

2 Likes