Jump to content
Search Community

BackgroundImage doesn't work properly on Safari

valent_inf test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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) : 

post-48607-0-92865900-1485792714_thumb.png

 

And here on Safari (not working) :

post-48607-0-66993600-1485792812_thumb.jpg

 

 

If you have any idea

Link to comment
Share on other sites

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!
 

  • Like 2
Link to comment
Share on other sites

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 :'(

Link to comment
Share on other sites

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

 

 

:)

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

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.

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.
×
×
  • Create New...