Wrong position and skewing images at the first click

[gregorvoinov]

hi,

I tried out your vue-overdrive, but I'm running in some problems...
I have done a screen-record where you can see the behavior. At the first click it doesn't work really. Starts transitions from the wrong place and skew the images if i go back in the overview list. I use the same images in the overview page and in the detailpage, so it can't be a loading problem because the image should be in the cache...

I have also done a sandbox, maybe you can take a look if its my failure or its really an issue ;)
https://codesandbox.io/s/vvq286qjpy

Specifications

• Version: latest
• Platform: windows/mac

[mattrothenberg]

@gregorvoinov Thanks for reporting this. Images are tricky, so that could be the culprit here. I'll take some time to investigate over the next few days and get back to you!

[mattrothenberg]

Hey @gregorvoinov, I did some experimentation and found out a few details.

NB: the little "flashes" that you see are me refreshing the page so that I can see how the animation performs when navigating from the detail -> index view, as opposed to index -> detail.

1) Natural height images (JANK)

When placing images straight into the DOM (without a fixed height), you probably get jank because the browser has to repaint/relayout the DOM after downloading the image after the page transitions.

https://streamable.com/ogyu4

2) Fixed-height boxes (SMOOTH)

When using fixed-height boxes, you get a buttery-smooth effect, since the browser doesn't undergo an additional repaint/relayout step.

https://streamable.com/etozi

3) Images absolutely positioned in fixed-height boxes (SMOOTH)

Likewise, when you wrap your images inside of fixed-height boxes, you get a buttery smooth effect because the image downloading doesn't cause elements to shift on the page (since they're contained inside of a fixed-height element).

https://streamable.com/f8uzh

My Recommendation

If possible, absolutely position your images inside of fixed-height containing elements. There's probably a workaround to support the natural image use-case (as in your original example), but I can't think of a great solution.

Hope that helps! Let me know if you want to see the code from these demos.

[gregorvoinov]

wow thank you man ;) that helped me a lot ;)

I updated my sandbox there, but now i have the behavior that it fades first out all elements and then fades in the shared transition element.

If I remove overdrive from the markup then there is no fading (and of course no animation ;)

I've seen that on the elements the style opacity: 1 is set, but I do not put this by myself, maybe it has something to do with that behavior?

[mattrothenberg]

@gregorvoinov Glad it helped.

The opacity thing is interesting. overdrive certainly doesn't do anything explicitly with opacity, but i know that Ramjet (the library I'm using under the hood) does as a result of calling ramjet.show and ramjet.hide

[gregorvoinov]

Thank you for your effort.

So you have no idea how to get over this problem? Then I will try my luck at ramjet.

[mattrothenberg]

I'll keep investigating.

[gregorvoinov]

thank you, I also started at ramjet an issue

[mattrothenberg]

@gregorvoinov I just published an alpha release that hopefully resolves the following issues you noted: https://www.npmjs.com/package/vue-overdrive/v/1.0.0-0

• Images no longer flash when navigating back/forth

Unfortunately, there will likely always be some jumpiness when navigating between views with images (of different sizes). I recommend using fixed/absolute sizes where possible when using overdrive.

Merry Xmas 🎄

[gregorvoinov]

hi, I tested it now and the there is no longer a flash ;) but now if I click the back link, in my example, it jumps to x/y: 0/0, then moves to the position and in the last animation frame it jumps a little bit down. I set on both images, via style, the witdh and height.

[mattrothenberg]

Thats because Vue Router"s default behavior is to reset the scroll position between routes. You'll have to preserve it.

…

On Wed, Dec 26, 2018, 4:27 AM blackskull ***@***.*** wrote: hi, I tested it now and the there is no longer a flash ;) but now if I click the back link, in my example <https://codesandbox.io/s/ym0221wq39>, it jumps to x/y: 0/0, then moves to the position and in the last animation frame it jumps a little bit down. I set on both images, via style, the witdh and height. — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#11 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AE6PtFbnb1B1tslGGZiZRJVdXp5Jqiseks5u80ETgaJpZM4ZYSMy> .

[gregorvoinov]

But why is this behavior only if I go back? I know if I'm scrolling I have also to check my scrollposition and do some offset if I scroll the page, but one problem after another ;) So if I don't scroll and just click the first image everything is fine, now click the browser back or the link button (don't scroll) than the image jumps and not the whole view (the home headline doesn't jump).

[mattrothenberg]

Eek, I'm not sure I fully understand the issue you're describing. I'm able to create fairly smooth image transitions, though this is starting to sound like an edge-case of this library (one that I don't feel is super important to support at the moment).

https://streamable.com/0ft71

If you're up for a a challenge, I welcome any and all pull-requests that would tweak the library to your liking. Until then, I'm confident we can mark this issue as "resolved."

As an alternative, you might want to check out https://fancyapps.com/fancybox/3/ which does this effect pretty well.