Issues with Safari
In this article
- Fullscreen videos
- 1px line above/below Shape divider
- Text animations are blurry
- Phone numbers look different
- Safari doesn't show some images
- Windows Safari
- Dark opacity causes light overlay
- Vimeo videos don't work after pressing "Back" button
- Slide parallax does not work
- Slider disappears after flashing
- Slider height keeps growing on resize
- Carousel images look bad on Safari 15
- Flickering during slide switching
- Retina resized images
- Autoplaying video volume
- Safari crashes when the slider is on the page
- Scrollbar doesn't appears on admin area
- Can't scroll over slider
- Video layer doesn't have preview image
- Audio layer won't load
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.
Workaround
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 3.5.1.0 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.