Not GSAP related but CSS/JS - please delete if unwanted as off topic

[iDad5 214 Likes (Specialist)]

I have a really strange behavior in a project with CSS Transitions. 

I cannot pay a lot, but I would try to compensate as best I can.

 

I posted the hard to describe problem on stack-overflow as it is not gsap related, but aside from downvotes and edits I got no replies.

 

https://stackoverflow.com/questions/75322030/unexplainable-css-positioning-issue-somehow-related-to-transitions

 

As a lot of the best front-end geniuses I know are active in those forums, I thought I give it a try to ask for help here. Please contact me if you feel you might be able to contribute. 

[GreenSock 18,587 Likes (Superhero)]

Yeah, this isn't really a good fit for these forums, @iDad5. But if you're willing to create an extremely clear, minimal demo that illustrates the issue with as little code/markup possible, I don't mind leaving it here to see if anyone wants to chime in. You will exponentially increase your odds of getting an answer when you spend the time isolating things in CodePen.

 

You spent 13 paragraphs describing the problem on StackOverflow with zero code, but I bet that if you just posted a simple CodePen along with one brief question like "click the 'switch class' button and notice the jump on these browsers ____...how can I make that smooth?", you'd get a ton more people willing to jump in and help. 

 

I know it's a pain to create minimal demos and craft succinct questions. It's really an art form that will pay huge dividends when you invest the time. 

[iDad5 214 Likes (Specialist)]

I know that I've earned a well-deserved reputation of not being able or willing to isolate problems, but talk much too much.
The problem I have in this case simply cannot be replicated in a simple setup.

In this case,—as I wrote on stackOveflow no scrip whatsoever is involved in positioning anything anywhere in the application.

Yet, when I had to restructure a bundle of ES2022 modules to get rid of circular dependencies, this strange thing happened. 

The restructuring involved no new functionality—especially no functionality that changes any style value, as nothing in the project does. 

 

Everything is done by adding and removing classes.

 

The CSS and the HTML, as well as the class names, are 100% unchanged before and after the restructuring.
 

Whatever. I guess you are right. I will simply delete the thread. Sorry for being a bother once again.

[GreenSock 18,587 Likes (Superhero)]

14 minutes ago, iDad5 said:

Sorry for being a bother once again.

That's not what I was implying. I think people want to help you...it's just very difficult with the info you provide, that's all. 

 

15 minutes ago, iDad5 said:

The problem I have in this case simply cannot be replicated in a simple setup.

In this case,—as I wrote on stackOveflow no scrip whatsoever is involved in positioning anything anywhere in the application.

Yet, when I had to restructure a bundle of ES2022 modules to get rid of circular dependencies, this strange thing happened. 

The restructuring involved no new functionality—especially no functionality that changes any style value, as nothing in the project does. 

Trust me, I've experienced SOOOO many things that initially seemed this way. I was baffled. Things seemed random. And my setup was complicated. Creating a "simple" demo seemed daunting or impossible. Way too many moving parts.

 

However, in almost every case when I pushed myself to just back up and start with the most simple basic setup (a few <div> elements) and start slowly layering on the complexity in a strategic way, I'd stumble upon the issue and it'd all suddenly make sense. The key is spending that time taking the complex broken thing and rebuilding a simpler version from scratch and then testing every time I added a small layer of complexity. BOOM as soon as it broke, I'd see what was doing it. 

 

"the problem cannot be replicated in a simple setup", I want to respectfully challenge you on that. I'd bet money it is possible. 

 

It boils down to comparing the version that worked with the one that suddenly broke when you changed your bundle configuration. SOMETHING changed somewhere. When there are 500 possible things, the key is to minimize that number, hence starting from something very simple and slowly building up to be closer and closer to your "broken" (complex) version. 

 

It's totally up to you if you want to pursue this. I'm just trying to offer you some tips on how to help us help you because as I hope you've seen, people in this community genuinely do want to help wherever we can. 

[iDad5 214 Likes (Specialist)]

42 minutes ago, GreenSock said:

"the problem cannot be replicated in a simple setup", I want to respectfully challenge you on that. I'd bet money it is possible. 

Funny, I was thinking of offering the same challenge in reverse but with something of real value as your price—a rare Japanese Single Malt not just money.

 

42 minutes ago, GreenSock said:

 

It boils down to comparing the version that worked with the one that suddenly broke when you changed your bundle configuration. SOMETHING changed somewhere. When there are 500 possible things, the key is to minimize that number, hence starting from something very simple and slowly building up to be closer and closer to your "broken" (complex) version. 

That is surely true. I will attempt to do this eventually. 

 

Thing is, I stared out with this situation.

Which was still working fine but refused to accept another module.

It took me 8 frantic hours without leaving my chair to get to this situation.

Without any functional change at all in the code, just changing references and import statements.

 

The reason for all that was the pressing need for additional functionality (hence the new module).

 

I solved the CSS(?) situation by taking out the position of the transition in question, and had to soldier on with the new functionality.

 

Meanwhile, the project gained around a thousand lines of new code. Taking back in the transition for 'left' still has the same consequences. 

 

Going back to the version before the refactoring and working back through the 8 hours of restructuring will be a lot of work.

If I find a way to restructure things in a way that do not have that side effect, I'm still left with all the new code added in the following days.

And I probably still will not understand the reason for the issue in the first place.

 

As I had the other issue at hand, you helped me with over the last week, as a second wildfire, I simply could not take the time needed when needed.

 

Give the unusual nature of the problem, I hoped to find someone who had a similar issue before.

 

Broken down to a simple question, it might be:  How can it be that that dev tool of all browsers report a left value of zero, for a relatively positioned element in an absolute parent, while the rendering shows something entirely different?

When toggling the one responsible class off and on, the values in dev-tools are 100% the same as before, but the element is rendered exactly where it is expected.

 

Finding someone who can explain that could save me days (the rest of sanity I hold on to, probably too). And make a priceless bottle of Whisky change its owner.

[ryan_labar 4 Likes (Newbie)]

  

5 hours ago, iDad5 said:

Broken down to a simple question, it might be:  How can it be that that dev tool of all browsers report a left value of zero, for a relatively positioned element in an absolute parent, while the rendering shows something entirely different?

When toggling the one responsible class off and on, the values in dev-tools are 100% the same as before, but the element is rendered exactly where it is expected.

No need for the whole back story, this should do it...

Have you tried this with transforms (transform: translateX(100%); etc.) instead of positive and negative left values (browsers don't like repainting position values, and this can cause some visual bugs sometimes, but they do handle transforms nicely)? Also, do you have a width and max-width set on the overflow: hidden; container?

 

One other thing you could try is the old trick of adding backface-visibility: hidden, or the newer, and more reliable, trick of will-change (https://developer.mozilla.org/en-US/docs/Web/CSS/will-change). I usually use will-change: transform;, but will-change: scroll-position; sounds interesting in this instance.

 

Did I win the Whisky?

Honestly, mostly just shooting in the dark over here, but if I had a working link or demo that showed the bug, I'm fairly sure I could help solve your issue.



 

[iDad5 214 Likes (Specialist)]

Thank you very much for your input. But I‘m sorry to say, that none of your competent tips are any news to me or the others that have looked at the problem. 
 

I have ample experience with all those methods and techniques. And even though I was certain that none of those had anything to do with the phenomenon I tried them all. 
 

The thing is that there is absolutely nothing remotely fancy in way of rendering on tis page.

All of the problems that could be solved wit one of the tricks you mentioned could - at least in my experience -  be seen in the dev-tools sometimes very deep inside but when knowing how to read them, the information given was consistent with the image rendered. 
 

With the more complex stuff, I admit sometimes no info can be found. But as I said there is nothing fancy at all, and simply toggling the class on and of in dev-tools „repair“ it. 
 

Regarding the Whisky - whenever you are in Munich a great dram will wait for you. Fair? 

[ryan_labar 4 Likes (Newbie)]

Fair enough on the whisky, but now I'm wondering what could be causing your bug... Ping this thread when you have a something working to show the issue... Browsers usually don't go off the rails (the exception being Safari) these days, so I'm sure it's something simple that's being overlooked, or could use a fresh set of eyes... Can this be reproduced with divs and a quick class toggle in CodePen?

[iDad5 214 Likes (Specialist)]

It is indeed intriguing. 😬

As I tried to tell GreenSock in my explanations I tried to reduce it, but couldn’t really. 
I simply do not have interim states of my frantic refactoring session stored. 
 

I did no real browser testing during that time, I just changed references until it worked again and as I only had left 2 or 3 circular dependencies, for good measure I killed them off too. 
 

To be very frank, this was the first time I had to care about that, and my research into the subject left me rather confused. 
 

The whole native JS module thing is hard to research, as so much non native module clatter is overgrowing the information. I often read for 15 minutes before it became clear that the article was actually about Node.js modules. 🙁

 

I do understand that circular dependencies can become to complex to handle, but like in my case browsers handled a ton of them with me even realizing it. But once they broke, simply taking one or two out to add a new one didn’t work at all. 
 

I somehow cannot believe that those two things are really connected, especially as things broke on the painting side once the dependencies were cleared up. Also the module loading and parsing is long done bevorworte even the DOM is constructed 

 

But the unlucky connection of both things make it so challenging to really analyze the problem I’m a methodical way. 

I can (as soon as I have a little time) send you a link to the full thing (need to prepare a Version of it anyhow) if you are interested. I‘d try this via personal message then, as I feel this thread is about to overstay its welcome. 

[ryan_labar 4 Likes (Newbie)]

42 minutes ago, iDad5 said:

I can (as soon as I have a little time) send you a link to the full thing (need to prepare a Version of it anyhow) if you are interested. I‘d try this via personal message then, as I feel this thread is about to overstay its welcome. 

Sounds great!

I'd be shocked if the paint "bug" was due to any sort of dependencies.

[GreenSock 18,587 Likes (Superhero)]

If I were you, I'd make a copy of your project and remove EVERYTHING you possibly can and still have it broken. Then I'd literally open that [problematic] page in the browser and save the source. Post that so others can open it, crack open Dev Tools and see what's going on. Don't make people have to run your whole build process - just shortcut to the problematic HTML/CSS/JS that can be opened in the browser. Just an idea. Good luck!

[iDad5 214 Likes (Specialist)]

Good idea, I will try to get that to work this weekend. 
 

[iDad5 214 Likes (Specialist)]

I found a solution and 'kind of' an explanation, even though I do not have had the time to fully understand the reasons things went south. I posted what I know on stack overflow, as it is not gsap related. (never could have been)