Strange behavior when Chrome devtools is open

[Hy-digital]

After a couple hours of debuggining, it turns out that having the devtools open causes the previous image to flash for a moment after it transitions out.

 

This happens both on codepen and locally.

Attaching screenshot of specs. I did manage to reproduce it on another computer with varying degrees of success.

 

Wanted to share this as maybe someone will encounter the same issues as me, as I tend to develop with the dev console open, I could not identify the issue. Would be good to know if this is just an isolated case for me, for whatever reason (my machine or code, etc), or an actual issue.

 

When the console is closed, everything plays just fine. I am stumped.

 

Edit: just tried and it happens on this page as well when I open the console.

 

Cheers,

Alex.

See the Pen eYyxKNV by alexkidoo (@alexkidoo) on CodePen

Edited April 20, 2022 by Hy-digital
tested on this page

[Cassie]

Dev tools use a lot of the browsers resources. Pretty common for that to impact other processes!

[Hy-digital]

Thanks for your reply Cassie, but I have a hard time believing this to be the issue. If that was the case, every tween should be impacted, when it clearly isn’t. 
 

I’ve written much more complex animations and never came across this issue before. 
 

I just got home and tried on my Windows PC which should not struggle under any circumstances, and the issue persists. Here’s a screen recording https://watch.screencastify.com/v/0EQZne79TWkO7JbPM4w7

 

i would like another opinion on my code to confirm that isn’t the culprit, but it should not have this impact. 

[Cassie]

Maybe someone in the forums will be able to help - but I've had many animations in the past and sometimes even layout break with devtools open.

We can't really advise on the performance of websites with devtools open - much in the same way that we struggle to advise on third party libraries. Lots of stuff is happening that we don't have any control over.

 

Hope someone can advise, good luck.

[OSUblake]

I can't reproduce the issue. Have you tried in incognito mode? Maybe you some extension that is messing with it. 

 

As far as code goes, the only thing that stands out to me is that you are changing the src of an image, which can cause weird behavior sometimes. Maybe try another technique with all the images already in the DOM or use canvas to draw the images.

[Hy-digital]

Now I feel kinda silly. The reason was simply because the cache was being disabled from the devtools settings and its probably the one thing I didn't check but someone pointed it out.

 

</thread>