Slider breaks on safari, but not chrome

Design help General
#1

Here is my project,

In chrome the slider looks like:

image
image1920×1068 64.2 KB

in safari the slider looks like:

image
image2618×1684 221 KB

In the editor it looks like:

image
image1920×1050 66.6 KB

I cannot figure out how to solve it because it doesn’t look off in the editor. Also, when I resize the safari page, or hit the back button then forward button, it then looks like it’s supposed to.

Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])

[2]: Share a read-only link | Webflow University

#2
1 Like
#3

https://preview.webflow.com/preview/mahns-groovy-project-c704ca0c628074d592?utm_medium=preview_link&utm_source=designer&utm_content=mahns-groovy-project-c704ca0c628074d592&preview=235e6f4050136959d087fbb8706d79cb&pageId=6189c95debe42e18b865638f&workflow=preview

#4

hi @Donji I have been now looking into your issue and searching on internet but nothing there that will solve issue when you add more that one slide. When I was messing around with slider I have found that this issue only happened when slider is placed in CSS Grid. It narrowed down where issue can be and finally I have found that CSS Grid space where slider is placed have to have min/max set up. So it is stable now in Safari, Firefox, Chrome and Brave.

It may be WF issue

Here is image what to set

CleanShot 2022-02-08 at 23.41.45
CleanShot 2022-02-08 at 23.41.451130×338 42.3 KB

Read-Only & LIVE just in case.

Hope that helps solve your request.

1 Like
#5

thank you so much! I’ll try this out!

#6

that worked, thank you stan, you are the best!

1 Like
#7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.