Jump to content
GreenSock

AlexDrop

Bug on className tweens

Recommended Posts

Hy guys,

I love your library since the Flash times :)

 

I just found what I think is a bug. In the codepen link there is an example.

 

 

If you tween a class which name is contained in another class, the part of name of tweened class was subtracted on the other class

<div class="open-sub" id="tween"></div>

if I tween a class with the name "open"

TweenMax.to("#tween", 1, {className: "+=open"} );
// +=open or -=open produce same bug

the "open-sub" class will become "-sub"

 

 

Nothing breaking, but could lead in a very tricking result

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

  • Like 1
Link to comment
Share on other sites

Hello AlexDrop and welcome to the GreenSock Forum!

 

This doesnt look like a GSAP bug,  but a codepen loading issue. Its running the code before the DOM and window is ready. You can see that if you look at the browser inspector net or network tab.

 

When i first opened in codepen i saw that -open.. but after a page reload i dont see it.

 

Have you tested this outside of codepen?

 

I tested on Windows 7 in Chrome, Firefox and IE11 and im not seeing it. Sometimes codepen will load code weird or incomplete.. since your code is being loaded within an iframe within codepen.

 

Here is your codepen using codepen FULL mode which loads your code without an iframe. And i see the proper class being added

 

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

 

This looks like a codepen issue on load. Looks like the DOM and window is not ready before codepen applies your JS code. So you can also add some event handlers to make sure the JS code only runs when the DOM is ready and the window is fully loaded.

 

:)

Link to comment
Share on other sites

Yes, I discover this in my project. 

 

I'll try to call the tween with a delay, so you can check the dom change in realtime

 

 

Edit: Just opened your link, same problem with me. Chrome 48

 

Thanks for your reply :)

 

Re-edit: :D

The problem was not the class to add, the class is added correctly, the problem is that the tween mess with the other classes that contain the same string. "Open-sub" become "-sub".

Link to comment
Share on other sites

I just added a DOM ready event and i dont see it happen on first load

 

Again this is happening because the DOM isnt ready when the code runs in codepen

 

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

 

Tested in latest  IE11, Firefox Chrome on Windows 7 (64-bit)

 

When i run your code locally outside of codepen i dont see this happening.

 

Lets see if others are seeing the same thing..

 

:)

Link to comment
Share on other sites

Hmm weird im not seeing that behavior

 

What OS are you seeing this on Windows or an Apple device?

 

But like i said i even exported and downloaded the codepen and dont see just -sub class without the word open

 

You can find the export button in codepen in the bottom right corner.

 

Maybe some other people can chime in and see if they see the same on their computer, since im not seeing that on first load.

 

If not maybe GreenSocks Carl and Jack and look into this ;)

 

Thanks for your patience AlexDrop :)

Link to comment
Share on other sites

Windows 10, Chrome 48.

I found the problem in a project with the actions set on dom ready with jQuery, so I don't think depends on codepen, but if you don't have the same behavior I don't know what could be the problem.

 

 

http://www.fratelliguzzini.com for your curiosity and pleasure :D

 

 

 

Final codepen demo. Sorry but i don't have an account, so I think can't link a fullpage view

 

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

Link to comment
Share on other sites

I have the same issue as AlexDrop on ChromeOS (Chrome 48). Good catch

  • Like 1
Link to comment
Share on other sites

I wonder if this is just a Windows 10 Chrome 48 issue?  .. since i do not see this on Windows 7 (64-bit) on Chrome 48

  • Like 1
Link to comment
Share on other sites

I can confirm what you're seeing Jonathan.

 

Windows 7 (64-bit) Chrome 48 - no bug. 

 

Windows 10 - Chrome 48 - I see the same bug as Zach and AlexDrop.

  • Like 2
Link to comment
Share on other sites

What about open an Ice cream shop or a Pub? :D This is not a real job!!! :D

 

 

Edit: same problem on Android 4 / Chrome

Link to comment
Share on other sites

Thanks Craig and Zach for testing Alex's codepen link..

 

Try this .. since there are known bugs for Windows 10 and Chrome as far as loading slow.

 

Test the codepen in Incognito Mode (Private Browsing) window.

 

The Chrome Dev Team recommends when debugging and testing code in Chrome. For you to always test in Incognito Mode (Private Browsing) so you dont skew results and loading since extensions and other factors not in Private Browsing mode a affect what you see in Chrome Dev Tools.

 

Try that and at least we can see if other still see on Windows 10 in Chrome 48 in a Private Browsing Window. ;)

 

:)

Link to comment
Share on other sites

Same problem on iPhone (I don't know which model, I asked people to test codepen :) )

Link to comment
Share on other sites

o.k. - this is a little weird. Now I'm seeing it in Chrome 48 on Windows 7 too.

 

I pulled the pen down for local testing and I do see this in all browsers Win7/Win10. For clarity sake, I made the class of .-sub into .open-sub. If you use a hyphen in the .open-sub class name, the bug appears, but if you use an underscore instead everything works as expected.

Link to comment
Share on other sites

Same thing in incognito mode, Jonathan!

 

Edit: Also occurs in Chrome, FF, and Edge on Windows 10 for me

  • Like 1
Link to comment
Share on other sites

Thanks Zach!  .. Looks like Jack and Carl will have to look it to this on their end regarding Windows 10 and Chrome 48.

 

I appreciate all your help guys! :)

Link to comment
Share on other sites

Maybe if you namespace your code like    

// Set namespace.

    var NS = {};
then prefix your vars with NS.
Link to comment
Share on other sites

Thanks for reporting this and yes, it looks like a very rare edge case that needs to be fixed. It'd only happen when you're using a substring that already exists in the list of classes and there's a hyphen or underscore directly next to it. I should have a solution for you tomorrow. Please stand by.

  • Like 4
Link to comment
Share on other sites

It was indeed an edge case that would affect the RegExp responsible for swapping in the class name, and it should be fixed in the latest preview of 1.18.3: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js (uncompressed). Thanks again for pointing this out, and sorry about the hassle. 

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