CamelCase Browser compability

[rustytusk 1 Likes (Newbie)]

Hi all,

 

I am currently working on a little project and i wanted a header with a background and when you hover over this header-div, the background zooms in. 

However, when I use the camelcase notation in the TweenMax vars, it works fine in Mozilla, but messed up in Chrome, and vice-verse. So 'background-size' works fine on chrome but pretty strange in Mozilla.

 

Hope you can help,

 

thanks in advance!

 

rusty

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

[OSUblake 9,990 Likes (Superhero)]

I'm not sure why background size behaves like that. If you use a width and height with the camel case it seems to work, but you also have to set it first.

 

See the Pen zvpNPB?editors=001 by osublake (@osublake) on CodePen

 

I was just looking at this thread, and they used kebab case with only one dimension. However, I'm not sure if it worked in Firefox and the demo doesn't seem to work anymore, but I do remember it working in Chrome.

 

http://greensock.com/forums/topic/12053-handle-size-of-backgroundimage/

[Jonathan 5,176 Likes (Superhero)]

To add to Mr OSUblake's  great advise:

 

Here is codepen demo example i made last year that still works in Firefox and uses backgroundSize in camelCase form

 

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

 

[OSUblake 9,990 Likes (Superhero)]

I actually came up with my answer based on your pen. 

[Jonathan 5,176 Likes (Superhero)]

rustytusk it could be maybe that its not working in Firefox since your just passing 1 parameter value but background-size expects 2

 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

 

background-size initial value is 0 0 (width and height)

[rustytusk 1 Likes (Newbie)]

Thanks a lot guys, this did the trick! CamelCase with two values (width and height) works well in both browsers!