Hello,
I’m building a website for a client and I have a problem with the Slider (nestable) element. We use the slider to present company logos, I set the animation so that the slider keeps running infinite.
Problem appears in an older version of Safari (ver. 16.5, macOS Ventura and below). Images are not rendering correctly. I have to click on the slider to show them. The problem only occurs if the slider runs from left to right. The slider running from right to left displays all images correctly. In the new version 17.3 (macOS Sonoma) I don’t have the problem.
All browsers except Safari have no problem and everything displays correctly.
Here is the slider settings and custom CSS:
%root% :where(.splide__list, .splide__slide) {
transition-timing-function: linear !important;
}
Conditions
I thought of solving the problem by making Safari display the animation from right to left, but setting the conditions doesn’t work either. I duplicated the slider, set these conditions:
Slider 1: Browser - is not - Safari, direction from right to left.
Copy of Slider 1: Browser - is - Safari, direction from left to right.
It’s broken, I don’t think Bricks even knows what browser it is. Only the left-to-right version of the slider is shown. In all browsers. There is no difference.