Flex Gap Property Fallback (for Safari)?

[adaptifyDesigns]

In general this hasn’t been an issue, as I believe Cornerstone uses negative margins instead of the flex gap property in general, but I’m noticing that the new Slider element uses the gap property without a fallback. Because these properties are generated via Javascript, I’m not sure the best way to create a fallback that will work for olde versions of Safari without affecting the spacing of slider items on more modern browsers.

Here are the settings for my marquee “logo bar” slider:

Here’s what I see when I inspect my slider:

.x-slide-container.is-inline {
    display: flex;
    gap: var(--x-slide-container-gap, 1rem);
}

The latest version of Safari (on MacOS) has support for the gap property, but it was only a couple versions ago which did not support it, so there are many Safari users who are not seeing proper spacing between flex items that utilize this property.

What would you recommend for ensuring Safari backwards compatibility for the slider element?

Thanks!

[ruenel]

Hello @adaptifyDesigns,

Thanks for writing in!

Please check out this article:

• https://stackoverflow.com/a/67133945

Best Regards.

[adaptifyDesigns]

@ruenel

https://stackoverflow.com/a/67133945

Hi, yes, I’m aware of the Lobotomized owl selector, but I just want to make sure you understand that the Cornerstone Slider component does not include a fallback for browsers that do not support the gap property. If I use the lobotomized owl selector fix, in conjunction with the Slider’s gap setting, then I would be adding double the margin between slider items on browsers that do support the gap property.

For anyone else encountering this issue, In order for this to work you have to set the slider’s Gap setting to zero, and then use the lobotomized owl selector on the Slider Container element (custom css), like this:

$el .x-slide-container.is-inline > * + * {
  margin-left: 3em;
}

And if you want the Gap to be different on different screen sizes you’ll need to write those media queries manually in the custom CSS as well.

[ruenel]

Hello @adaptifyDesigns,

I will forward this thread to our developers.

Thanks.