CSS transition problem in Chrome 49

[vandroids]

Hi!

Yesterday I've updated my Chrome to v49 and got some weird animation behaviour in Photobox.
By unknown reason the transition step between some photos is wrong.

When I click "Next" arrow button, here is what happening:

1. Element with old image is growing and become invisible (OK)
2. A new element with OLD image appears and grow (Hmm...)
3. Somewhere in a between an image switches to a new one. Then animation ends.

OR

1. Animation ends. Image switches to a new one.

If you have Chrome 49 on your desktop, I've made an example for you:
http://photobox.byethost16.com/photobox.html
Screen video: https://youtu.be/jaaAfu3DIV4

As you can see the animation in first gallery works wrong (for every image).
Then we have second one where everything is fine.
And also a third one where only first two images have an issue.

I cannot find what exactly is wrong. So I hope it's maybe a Chrome bug or dunno...

[jrondorf]

I can confirm this new behaviour with Chrome 49 with my own galleries.

[yairEO]

Thank you for reporting this, I will investigate.
I wonder why in the first gallery the bug exists and on the second one it does not.

btw - in your demo, you have set the same id multiple times (photobox_gallery-1)...id is unique and cannot be written more than once on the page.

[jrondorf]

It is also appearing in the second gallery. Clear the browser cache, open the first image, and quickly scroll with right arrow to 3rd or 4th picture. The first picture will appear again, and after the correct image is downloaded by the browser, quickly exchanged.

[yairEO]

Try now, I've updated the code

[jrondorf]

This issue is not fixed with 1.9.10.

Clear Cache, open http://yaireo.github.io/photobox/ in Chrome 49.0.2623.87 (Mac Version), launch Photobox and quickly jump some picture to the right. You will see how the correct picture is loaded, and after finished loading, quickly disappears and appears again.

[yairEO]

I do not see the problem. I also downloaded your complete code example, and identified the Chrome point of failure, and have corrected it. Tested on Version 49.0.2623.87 m / Windows 7.

This is what I did: I am now completely removing the image from the DOM and creating a totally new image element, with it's own src pointing to the photo which is about to show up, and when it's placed in the DOM, show it. Therefor, there is no way the old image will be seen after it has faded out..

[jrondorf]

I just recorded a video from your website, where 1.9.10 is active. There you are able to see the issue.

https://www.youtube.com/watch?v=uN3ucuz0TBY

[jrondorf]

From #115

I see, thank you. that is a completely different problem.
The one I fixed was this: just before showing the next photo, you would briefly see the one that faded out and then it would change to the one you are supposed to see.
This issue is something else: it is showing the photo that should transition-in before it is being animated, and then it animates it. Since I don't see this issue on 2 windows machines, I would conclude this is a MAC issue.
I don't know anyone who has a MAC computer and I don't have an account on Browserstack, so I can only try and guess what causes this issue...shooting blindly.
Can you please check Firefox also?

Firefox seems to work.

If you have a code snippet which I should try out on May, let me know.

[yairEO]

Ho crap I do mix issues (happens to me all the time, I have tons of open tabs (on 2 browsers..) :

Quote myself:

I see, thank you. that is a completely different problem.
The one I fixed was this: just before showing the next photo, you would briefly see the one that faded out and then it would change to the one you are supposed to see.

This issue is something else: it is showing the photo that should transition-in before it is being animated, and then it animates it. Since I don't see this issue on 2 windows machines, I would conclude this is a MAC issue.

I don't know anyone who has a MAC computer and I don't have an account on Browserstack, so I can only try and guess what causes this issue...shooting blindly.

Can you please check Firefox also?

[yairEO]

@jrondorf - can you try changing line 833:

image.replaceWith( image = $('<img src="'+ activeURL +'" class="prepare">') )

With:

image.replaceWith( image = $('<img src="'+ activeURL +'" class="prepare" style="opacity:0">') )

[jrondorf]

@yairEO Tested several times with this change, also with several browser cache flushes.
Unfortunately, no change, same symptom.

[yairEO]

I'm pretty sure it has something to do with that line.. since this is where the previous image is being replaced with the new one, and at that moment you see it briefly. try placing a debugger statement right after that line and see what happens on screen. I wish I had a way to debug this myself on a Mac machine.