Marquee item width changes on Safari

Finsweet Components Marquee
1

Description

Hey there folks! I just deployed my first site using the marquee component and I’m running into an issue where the marquee items are significantly wider when visiting the site using Safari than they are on Chrome or Firefox, which results in a really disjointed appearance. Is this a known issue or am I doing something wrong? :see_no_evil_monkey:

Site URL

Required: Please provide a staging/production URL where we can see the issue

Steps to Reproduce

  1. Visit the page via Google Chrome or Firefox
  2. Visit the page via Safari

Expected Behavior

I expected the marquee items to inherit the width of the image inside of them when it is set to a specific height

Actual Behavior

The marquee items are being made much wider on Safari

Video/Screenshots

Required: Please provide a short screen recording showing the issue

I’ve added screenshots in a comment due to new user link limitations

2

Here are the screenshots:

3

Edit: I realized a lot of these issues were on my end! :upside_down_face: Marking this as the solution for now.

According to the docs, it’s ideal to set the marquee item width whereas my design requires them to be the same height. The issue persists on mobile but I figured it out on the desktop versions of Safari by toying with the image size and marquee item attributes.

Maybe in the future it’d be helpful to have better support for marquee items that have set heights instead of widths?

4

Hey @holla! Apologies for the delay! I am glad you got it working!

I will forward this feedback to the team so we can correct the docs and improve the component.

Thank you!