Safari bug: slide not centered on first load or emptying the cache

[Francesco Scaringi]

Description

Hi, I installed vue3-flicking a few days ago and created a horizontal slider with X card. When I start the page the first card is correctly centered horizontally.

However, if I'm loading the page for the first time or emptying the cache, the first slide is aligned to the left instead of being centered. I attach two screens.

I also noticed an error installing the library in my main.js. Including 'vue" like this:
import {createApp} from 'vue' import App from './App.vue'; import VueFlicking from "@egjs/vue3-flicking";

and calling vue3-flicking globally like this

createApp(App).use(VueFlicking);

I get as error: Flicking is not assignable to parameter type Plugin

I don't think the two problems are related, but I'm writing this to be safe.

Steps to check or reproduce

• Use the example in this guide: https://naver.github.io/egjs-flicking/Demos with name "Variable Size Panels" or even any other horizontal example

• Load the page after emptying the cache on Safari browser

[Francesco Scaringi]

Hi @malangfox! Thanks for your job! Do you have any update for this task?

[malangfox]

Hello @fscaringi.

We apologize for the delay in checking the issue you left.

We have checked the demo link you left, but it works fine when checked immediately after emptying the cache in Safari.

We would like to get more information about this issue,
Is this issue only happening in the Safari browser? Also, could you attach any images about this issue?

[Francesco Scaringi]

Hello @malangfox, thanks for reply. This issue only happen in Safari browser, if I use for example Chrome or Firefox works perfectly. Here: https://www.codebakery.it/file/flicking_error.mp4 you can see the video of my strange problem. Initially the slider works perfectly, but then when I empty the cache the first slide is on the left of the screen and the slider become broken.