Images overlapping in Safari

[derWebdesigner]

Dear @desandro,

I just love Flickity and use it since 6+ years for my platform. While I always could solve all issues myself, this is the first time I have to ask for help. Chrome + Firefox are working great, but in Safari the images are overlapping even though I am using 'imagesLoaded: true' and included the plugin correctly via Webpack. The images are 'display: block' so I can exclude this. Simply reloading the page in Safari doesn't help, only some combination when opening the dev toolbar + resizing the browser, and then reloading seems to work.

Example URLs: https://www.locationscout.net/iceland/2570-haifoss-waterfall/4194 https://www.locationscout.net/united-kingdom/191-millennium-bridge-london/1298

Thank you so much for any kind of advice, highly appreciate it. Manuel

[elenitheo]

I'm having a similar issue with loukaleppard.com on the latest safari.

[derWebdesigner]

@elenitheo Right, but your overlapping in Safari looks completely different than mine, maybe because I didn't set any dimensions (because I can't) but imagesLoaded is not working correctly in Safari. Did you have this issue before or did it occur with some latest update of Safari? I am not checking this browser very often so I honestly can't tell when this happened... but I am pretty sure that I didn't change anything and suddenly more and more people are reporting this issue.

@desandro Is there any way to pay some extra money besides the license fee I already paid to get this solved somehow? I am honestly not 100% sure if this is just my fault and I am too blind to see a solution or not, because then it's obvious that I would need to pay for fixing it. Sorry for the inconvenience.

[elenitheo]

Hello,

The overlapping changes every time and it is very possible that it looks different on your computer. I’m having this issue when I ask my friends to check. It occurred suddenly, with no reason. It might be with the safari update but I cannot help you more. It was working well and suddenly it wasn’t working anymore.

Best regards,

Eleni

On 2 May 2022, at 15:34, Manuel Becker @.***> wrote:

@elenitheo https://github.com/elenitheo Right, but your overlapping in Safari looks completely different than mine, maybe because I didn't set any dimensions (because I can't) but imagesLoaded is not working correctly in Safari. Did you have this issue before or did it occur with some latest update of Safari? I am not checking this browser very often so I honestly can't tell when this happened... but I am pretty sure that I didn't change anything and suddenly more and more people are reporting this issue.

— Reply to this email directly, view it on GitHub https://github.com/metafizzy/flickity/issues/1215#issuecomment-1114888072, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYW6WADAF5JVAUEP5KEAPW3VH7KWXANCNFSM5THU64SA. You are receiving this because you were mentioned.

[derWebdesigner]

@elenitheo I was on my older Mac yesterday with an older version of Safari and it worked perfectly fine so it's definitely something that has to do with an update of Safari. I am just not sure yet though what the exact change or reason is and if this is something that can be fixed by ourselves or not.

[desandro]

Can you help me out and either link to a Flickity CodePen with images or create one so I can better debug this one?

Maaaaybe it's been fixed

[ins01-ship-it]

Hello, I am running into a maybe similar problem. I am using flickity for an image slider that shows parts of the previous and next image. The margin inbetween the images should be 0. For the most part it works great, however sometimes and I noticed that only in Safari, there will appear a thin white line to the right side of the image. I really can't work out as to why that is or what the pattern of this happening is, seems to happen random.

here is a codepen https://codepen.io/Insa-Deist/pen/abMmzGQ and here is the website that I'am implementing this in https://insadeist.net/roman/

thank you for any answers and tips :)