Jump to content
GreenSock

aminfa

IE animate border color bug after using mediaqueris

Recommended Posts

Hi

Here is the part of my tween that I have problem with :

rule = CSSRulePlugin.getRule("#sctrl table"); //get the rule
	if (scId==1) {var color="#2a2a2a"}
	else {var color="#f2f2f2"};
	if (scId < currentslide) {
		TweenMax.to(rule, 1, {cssRule:{borderColor:color},ease:Power2.easeIn});
	}

and I have this css code :

#sctrl table {width: 135px;height: 5px}
#sctrl table,tr,td{border:1px solid #f2f2f2;border-collapse:collapse;padding: 0px}

@media screen and (min-width: 1358px){
    #sctrl {width: 120px;height: 6px;bottom: 25px}
    #sctrl table {width: 120px;height: 5px}
    #sctrl td {width: 60px;height: 5px}
    #sc {width: 60px;height: 6px}
}

the border color animates fine in chrome but it doesn't work in IE10.

the interesting part is if I remove the mediaqueries in the css it will work in IE too.

I wonder where is the problem ?

 

the second question is I use multiple tweens at the same time and it's very slow in chrome. I tested in a few computers with chrome and in all of them it was slow. but if I remove this line of animations the speed will be very faster (more than twice):

TweenMax.to(rule, 1, {cssRule:{borderColor:color},ease:Power2.easeIn}); 

what is your solution ?

 

 

 

See the Pen lnkCJ by aminfa (@aminfa) on CodePen

Link to comment
Share on other sites

Hi,

 

Thanks for the CodePen demo. I looked at it and did not understand what was not working or what I was supposed to be looking at.

Being that you mentioned media queries I re-sized the window and didn't notice anything happening besides assets resizing.

 

Above you show 5 or 6 lines of code but your demo has nearly 100.

I understand you 2 have issues

 

1: borderColor tween not working in IE

 

2: slow performance when tweening a CSSRule

 

Please note though that the docs list two important considerations pertaining to this situation (which frankly I wasn't even aware of until i just looked)

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSRulePlugin/

Styles defined inside media queries may not be accessible/tweenable.

- so problem number 1 most likely isn't a bug.

 

 

Keep in mind that it is typically best to tween a property that has already been defined in the specific rule that you're selecting because it cannot perform a calculated style (the combination of styles from other selectors that might pertain to similar elements).

 

 

It appears you are tying to tween the borderColor using a rule tween, but borderColor isn't defined in #sctrl table

 

Knowing this, I'd imagine the results you are seeing are somewhat expected.

 

Its possible that trying to tween a property of that rule that isn't pre-defined is causing a performance hit. 

I'd recommend setting the borderColor in the rule prior, or try tweening another property and see if you get the same results.

 

Sorry for the delayed response, its been busy here today.

 

If you need more help with a specific issue relating to these problems, it would help to see a simplified example. 

  • Like 2
Link to comment
Share on other sites

Oh thank you so much for your answer.

 

 

Styles defined inside media queries may not be accessible/tweenable.

- so problem number 1 most likely isn't a bug.

But the problem is just in IE.

So in IE, I can't tween an element at all if i use media queries for that element ?!

Link to comment
Share on other sites

So in IE, I can't tween an element at all if i use media queries for that element ?!

 

 

That only applies to tweens of css rules via the CSSRule Plugin. You should be able to tween the element's css properties just fine.

TweenLite.to("#sctrl table", 1, {borderColor:"red"})
Link to comment
Share on other sites

To add to Carl's great advice.. I agree..  this looks like a IE10 browser bug that was birthed after Windows 8 came out

 

Try and see if it works when adding only screen instead of just using screen

// try with 'only screen'
@media only screen and (min-width: 1358px){
    #sctrl {width: 120px;height: 6px;bottom: 25px}
    #sctrl table {width: 120px;height: 5px}
    #sctrl td {width: 60px;height: 5px}
    #sc {width: 60px;height: 6px}
}

// or try without 'screen' or 'only screen'
@media (min-width: 1358px){
    #sctrl {width: 120px;height: 6px;bottom: 25px}
    #sctrl table {width: 120px;height: 5px}
    #sctrl td {width: 60px;height: 5px}
    #sc {width: 60px;height: 6px}
}

:

Looks like IE10 has a media queries bug:

 

http://blog.adrianroselli.com/2013/05/ie10-metro-and-media-queries.html

http://devhammer.net/responsive-design-fix-for-windows-phone-8-device-adaptation

http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html

http://stackoverflow.com/questions/20114855/media-query-is-not-working-on-ie10

http://stackoverflow.com/questions/20625745/ie10-responsive-bug-with-media-queries

 

:)

  • Like 1
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.
×