Jump the screen before or after a transition

[tatarysh]

Hey, during the tests, I noticed quite ugly slider behavior on mobile devices (I have not noticed the problem on the computer.).

While the slider plays and moves on to the next one, sometimes the screen moves to strange places, e.g. in front of the slider or behind the slider. I am attaching a video to show the problem.

Perhaps someone knows what this could be caused by?

https://user-images.githubusercontent.com/6283074/148550311-8885c411-6b03-4454-be9c-88511e64e38b.mp4

[ragnarlotus]

Looks like timing problem. I will take an eye.

Do you have a repo or something from where I can clone and check it? Also the mobile and browser would be very helpfull

Regards!

[tatarysh]

I will prepare something

[tatarysh]

Sandbox: https://codesandbox.io/s/suspicious-wozniak-ibhyc?file=/src/App.vue

Live: https://ibhyc.csb.app/

https://user-images.githubusercontent.com/6283074/148607612-58a4bb8d-e8ac-495d-a0d6-6b75d22cece5.mp4

[tatarysh]

hey @ragnarlotus, any eta for this problem? not that I'm rushing you, but I'd like to plan a few days ahead. if it takes a few days or more than a week, I will try to fix the problem myself, but I don't know your package well, so I guess it will take a while. thanks for your help

[jesavro]

@ragnarlotus is there any news on this issue? This seems to be a major issue for mobile users as it makes the page hard to use.

[ragnarlotus]

Sorry @tatarysh and @jesavro , I didn't have much time these days but I will take a look for sure this week.

[jesavro]

Much appreciated

[ragnarlotus]

Hello @tatarysh and @jesavro , I just checked the sandbox and the cause was one of my first suspicions.

In one of the updates I wanted to use random pics from one of those photo providers and noticed that the slider was not working properly. The cause I don't remember it very well because it was long time ago, but was something about metadata and sizes.

So since they return random data, they don't return it properly and the loaded triggers mess the timings. Unfortunately I couldn't find a solution but finding the images, download them and store them out of that host, that is why I have them at github.

So if you use the following syntax in the sandbox instead, or you host the images and the web server returns the image properly it will work as expected:

    images() {
      return [
        'https://ragnarlotus.github.io/vue-flux-docs/img/slides/10.jpg',
        'https://ragnarlotus.github.io/vue-flux-docs/img/slides/11.jpg',
        'https://ragnarlotus.github.io/vue-flux-docs/img/slides/12.jpg',
        'https://ragnarlotus.github.io/vue-flux-docs/img/slides/13.jpg',
        'https://ragnarlotus.github.io/vue-flux-docs/img/slides/14.jpg',
      ];
    },

Regards!

[ragnarlotus]

Ok, just remembered the details, the reason is because the slider preloads the images. The image needs to be loaded before the transition starts.

Since the source https://picsum.photos/800/600?random=1 is different every time you request it, it is supposed to have the image preloaded to be transitioned properly, but instead is a new image that needs to be loaded, so it loads in the middle of the transition which causes the undesired effect.

And so there is no problem as long as the same URL does not return a different image 😄

[ragnarlotus]

I close it, I guess you fixed your slider using your own pictures

Regards!

[tatarysh]

I am trying to load the image into the browser's memory before displaying the next image, maybe this will solve the problem (I'm talking about images that are not random). I'll let you know if I find a solution to this problem, all the pictures on my sites are hosted on cloudinary so I have to fix it somehow.

[ragnarlotus]

Did you try hosting them somewhere else?

From the logic I can explain you that works the following way:

• When you pass the images array, the controller creates an Img element to load the image, so it is cached (https://github.com/ragnarlotus/vue-flux/blob/d070cf9ddd62667d3e96cb3331a8bce9a844a542/src/controllers/Images.js#L145)
• Then when the animation wants to display it uses the same URL, and since it is cached it is instant, which is not happening to you

Is it possible that your host sends a header to don't cache the images?

[tatarysh]

Very strange, but the problem does not appear for me anymore in production