BackgroundImage doesn't work properly on Safari

[valent_inf 2 Likes (Newbie)]

Hey, 

 

I'm actually working on an event website but I'm getting some trouble with the property BackgroundImage in Safari. 

 

Here is my code : 

tl.to(videosBg, 0.1, {
    backgroundImage: "url('" + thisProp.background + "'"
},0.30);

thisProp.background is returning a path like this one "./assets/bg_props/bg_prop6.png". 

 

This short code is actually working on Chrome / Firefox but not on Safari. It's like, it was not accepting the property background-image. 

 

Here the targeted div on Chrome (working) : 

 

And here on Safari (not working) :

 

 

If you have any idea

[Carl 9,066 Likes (Superhero)]

I'm having trouble understanding how or why you would animate the url of a background-image. Are you expecting it to load 6 different images over the course of 0.1 seconds? Or do you just want to swap in a new single image?

 

Can you please clarify the desired effect you are trying to achieve? 

 

If you are trying to build a spritesheet animation it will be much more reliable to put all the images together in one and offset the background position.

This is a very basic implementation: http://codepen.io/GreenSock/pen/vLFmd

 

In order for us to help you come up with a solution it would greatly help if you supplied a CodePen demo that we can edit and test.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

The simpler you make it, the better.

Thanks!
 

[valent_inf 2 Likes (Newbie)]

I'm having trouble understanding how or why you would animate the url of a background-image. Are you expecting it to load 6 different images over the course of 0.1 seconds? Or do you just want to swap in a new single image?

 

Can you please clarify the desired effect you are trying to achieve? 

 

If you are trying to build a spritesheet animation it will be much more reliable to put all the images together in one and offset the background position.

This is a very basic implementation: 

See the Pen vLFmd by GreenSock (@GreenSock) on CodePen

 

In order for us to help you come up with a solution it would greatly help if you supplied a CodePen demo that we can edit and test.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

The simpler you make it, the better.

Thanks!

 

 

 

Hey, 

 

Well I would like to set a background on a div when I'm hovering an el. I made some search and I realized that I should use tl.SET instead of tl.TO. 

 

So I've update my code :

tl.set(videosBg, {
        backgroundImage: "url('" + thisProp.background + "'"
 })

This is still working on Chrome but still not on Safari :'(

[Carl 9,066 Likes (Superhero)]

Ok. Thanks for clarifying. It always helps if you provide a demo.

 

From what I can tell using background instead of backgroundImage should work:

 

http://codepen.io/anon/pen/LxQWbX

[valent_inf 2 Likes (Newbie)]

Ok. Thanks for clarifying. It always helps if you provide a demo.

 

From what I can tell using background instead of backgroundImage should work:

 

See the Pen LxQWbX by anon (@anon) on CodePen

Thanks a lot !

[LipstickVoid 3 Likes (Newbie)]

I'm having the same issue and changing to background is not working for me.

[Jonathan 5,176 Likes (Superhero)]

Hello LipstickVoid,

 

Do you have an example of your code?

 

Sometimes its better to create a new topic so we can concentrate on just this issue you are having.

 

Here is an example of animating an image sprite and just animates the background-position property. So your only using one image instead of having to swap out multiple images for better performance.

 

See the Pen zrGGmQ by jonathan (@jonathan) on CodePen

 

Please create a limited codepen demo example so we can test your code live

 

 

[LipstickVoid 3 Likes (Newbie)]

Hello LipstickVoid,

 

Do you have an example of your code?

 

Sometimes its better to create a new topic so we can concentrate on just this issue you are having.

 

Here is an example of animating an image sprite and just animates the background-position property. So your only using one image instead of having to swap out multiple images for better performance.

 

See the Pen zrGGmQ by jonathan (@jonathan) on CodePen

 

Please create a limited codepen demo example so we can test your code live

 

 

 

Sorry for the late reply. I was rushing through deadlines. 

 

I don't even know if I can strip the code down. It's a part of large project and using different plugins which caused a lot of things to conflict with each other. I didn't manage to find a solution for this but luckily, the design was changed and the use of background image through tweenmax was no longer necessary. 

 

I followed your advice of using sprite in a new project where I also had to swap images (clients love this lol). It worked very well. Thank you.