Issues with Safari

In this article

Fullscreen videos

Affected browser(s) Mac Safari
Affected slider type Showcase
Official bug report View
Status Awaiting Apple's fix
Available workaround No

Problem description

When you're using the Showcase slider type and put a YouTube or Vimeo video in fullscreen, Safari wrongly renders the content of the other slides before the video.

1px line above/below Shape divider

Affected browser(s) Safari
Affected slider type All
Official bug report View
Status Awaiting for fix
Available workaround None

Problem description

Safari renders the Shape dividers wrongly, due to their fraction rounding bugs. For example a slider could be 60.43px from the top or its height could be 500.21px, and as there aren't partial pixels, these will be rounded. This often creates 1px line above or below the shape divider, which shouldn't be there.

Text animations are blurry

Affected browser(s) Mac Safari
Affected slider type All
Official bug report View
Status Awaiting for fix
Available workaround None

Problem description

Text animations are blurry on retina screens (during and after the animation). Non-retina screens don't have this problem.

Phone numbers look different

Safari on mobile automatically recognizes phone numbers (or anything it thinks is a phone number) and wraps them inside an a tag, which is used to create a link. Because of this "phone number looking texts" can have different color on safari.

There are two solutions for this problem:

Disable this behavior entirely

According to the Safari HTML Reference you can disable this behavior using the following code:

<meta name="format-detection" content="telephone=no">

If you disable this but still want telephone links, you can still use the "tel" URI scheme.

Use a text layer with a custom link color

Create a text layer and at the Layer window → Style tab you can set a custom link color:

You should set this color to the same as the original text color, so even if Safari adds the link, the color will not change.

Safari doesn't show some images

Problem description

Some images aren't loading in Safari.

Safari has a problem with encoding special characters at image attributes for a long time now, and doesn't seem to fix it, so you should only use latin letters in the name and path of your images, and it should be fine.

Windows Safari

Problem description

The slider has an error in the Windows Safari browser.

The Windows version of Safari isn’t developed since 2012, and it has many known problems, so we don’t support it either.

Dark opacity causes light overlay

If you set up an opacity overlay for your images using a black and a transparent overlay and you see it much lighter in Safari, try using "00000000" as the transparent overlay, instead of "ffffff00". The "00000000" is the transparent for black, as opposed to "ffffff00" which is the transparent for white.

Vimeo videos don't work after pressing "Back" button

Error description: After playing the Vimeo video and navigating to another page then coming back with the "Back" button of Safari, the Vimeo video won't play anymore.

The problem happens because of a Vimeo bug. We reported the problem to Vimeo to fix. Unfortunately, the issue can't be solved from Smart Slider's end.

Slide parallax does not work

Safari is unable to handle the slide parallax well. For this reason the parallax effect was disabled in Safari in Smart Slider until Safari can handle it well. This affects desktop and mobile versions, too.

Slider disappears after flashing

Affected browser(s) Safari (Mac and iOS as well)
Affected slider type All
Official bug report View
Status Awaiting Apple's fix
Available workaround Yes

Problem description

When a slider is inserted under elements with negative margins, or you are putting the slider into a container which has negative margin, then the slider can flash or disappear, usually after slide switching.


Remove the negative margins over the slider.

Slider height keeps growing on resize

If your slider height keeps growing as you resize the browser or change the orientation, your issue is probably that your site's HTML structure is invalid. Some browsers are more sensitive than others, and problems with the HTML structure can make them behave weirdly.

Usually the problem is that the <html> tag or the <!DOCTYPE html> declaration is missing. Make sure you have both on your site!

Carousel images look bad on Safari 15

Affected browser(s) Safari (Mac and iOS as well)
Affected slider type Carousel
Official bug report View
Status Awaiting Apple's fix
Available workaround Yes

After slide switching some images are not rendered properly in the carousel type. The possible workaround is included in release.

Flickering during slide switching

During slide switching if you see flickering in Safari or other macOS/iOS browsers, then check the pixel size of your images. Usually this problem happens, because too big (and often too many) images are being used and your browser doesn't have enough memory to handle your images.

It is also possible, that sometimes the flickering only happens at the first slide switches, because that is when the browser has to render your images the first time, but after that when the browser has cached datas in its memory, the slide switching becomes better.

So the  solution is to make your images smaller.

Retina resized images

Some iOS/macOS versions have bugs with viewport based image html codes what we are using while Retina is being turned on at the Optimized tab. This makes the images to be distorted, so if you would like to support these devices too, you should leave the Retina option turned off.

Autoplaying video volume

Some iOS/macOS devices mute videos which are being autoplayed, as automatically started sounds are unwanted by users. At these videos the volume settings of the device are not being used at all, so even if you try to add volume, the video will still stay muted.

Safari crashes when the slider is on the page

Safari has a limitation when you load media to the site. The browser will simply crash if you load either:

  • too much images
  • or images with too big file sizes
  • or images with too high resolution

To avoid the problem, you try:

  • Limit the amount slides in your slider. We generally recommend maximum 20 slides.
  • Turn on the Convert to WebP and Resize options at Slider settings → Optimize tab.

Scrollbar doesn't appears on admin area

Mac devices have a setting (some have this by default) to hide scrollbars, and only show them on hover. This could make it problematic to find the scrollbar for example of the timeline. Make sure your settings are set to display scrollbars to avoid this issue.

Can't scroll over slider

Our mouse wheel option does not work in Safari due to a bug in the browser we have reported to them.

Video layer doesn't have preview image

At the video layer's settings, if preload is on metadata or none, Safari won't load a preview image. Set this value to auto or select a cover image.

Audio layer won't load

iOS Safari won't load the audio layer's file, unless the Loading type of the slider is set to Instant.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.