Chrome vs. IE and Firefox differences in rendering xPercent and yPercent

[jstafford]

Hi Greensock community,

 

I developed this codepen a while back,

See the Pen VeLKON,%C2 by jstafford (@jstafford) on CodePen

 

What is the difference between chrome vs. ie and firefox for xPercent and yPercent?

 

Do I use Modernizr to screen which browser I am using and give it the correct xPercent and yPercent until the wheels are centered underneath the wheel wells? Is there a less hackish way to do this?

 

Also, the actual center of my wheel may be off a little, there is a slight wobble to the wheel that I will correct later.

See the Pen VeLKON by jstafford (@jstafford) on CodePen

[Jonathan]

Hello again jstafford,

 

I'm not near my computer right now, but based on your codepen. Your first element in the DOM after the body is an absolutely positioned element. This will behave differently in different browsers due to how each browser calculates the offsets of your element. You can try adding a main parent element with position relative, that your absolutely positioned element is relative to. So this way the browser knows which element your absolutely positioned element is relative to.

 

As a rule of thumb you should always use a parent element (not the body tag) with the CSS property position relative, as anchor point for your absolutely positioned elements.

 

Also keep in mind that width and height are not inherit by their parents elements in IE. So its best to declare your width and height on your main containing element, even if that width and height are both 100%. Just keep in mind you will probably need to add a height 100% on your html and body tag so the

height gets inherited to use the whole veiwport. especially since you are using a position offset of bottom. So you would also need to add a height 100% to your absolutely positioned element and its parent that has position relative.

 

So you would need to just add the right CSS properties to basically equalize your css for cross browser, then xPercent and yPercent can get consistent calculations. Which is not a limitation with GSAP, its just the way each browser calculates elements within its viewport having to do with various CSS properties that don't behave the same cross browser. That are sometimes not inherited by there parent. Especially for elements out of the flow of the document like position absolute and fixed.

 

[jstafford]

Thanks Jonathan. I will give this a go tomorrow. I almost always use relative divs around absolute divs. In a rush to get this fixed, I don't think I did here. Thank you for your insight.