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 Yes

Problem description

Safari renders the Shape dividers wrongly, when they're after an element which height is not an integer but a fraction. (So it's like 60.5px.) The rendering problem causes a 1px line to appear above or below the shape divider.

Workaround

Make sure that the element before the shape divider has an integer height. E.g.:
.top-element{
    height:72px;
}

Where the .top-element selector is the selector of the element that has fraction height.

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:

1
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.

2
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.

Safari 8

Problem description

Smart Slider's default mode uses the flexbox technique which is officially supported since Safari 9 which came out in 2015. ( See the browsers which support flexbox) Because of this, Smart Slider 3 doesn't work properly in Safari 8 or older version, as these old browsers don't support the necessary codes for the default mode. 2015 was a long time ago in browser's development, and these old versions are not even supported by Apple anymore.

Divi and Safari - Slider won't load / Slider only shows up on hover

Affected browser(s) Mac Safari
Affected slider type All
Official bug report View
Status Awaiting Apple's or Divi's fix
Available workaround Yes

Problem description

The slider's won't (always) load in Divi when viewed in a Safari browser.

Workaround

Currently the way you could fix this if you would open either of these files:

  • wp-content/themes/Divi/includes/builder/scripts/frontend-builder-scripts.js
  • wp-content/themes/Divi/js/custom.min.js
  • wp-content/plugins/divi-builder/js/divi-builder.min.js
  • wp-content/themes/Divi/js/custom.unified.js

There is this code around the end of it, which seems like an effort by Divi's developers to go over a Safari bug. Unfortunately, the workaround creates another bug, which causes the problem and you should remove that codepart, which will fix it, until either Divi or Safari fixes the issue.

Let's see more detailed instructions on how to fix the problem.

Divi uses a code, which has a bug in Safari:

$(window).load(function() {
         var $body = $('body');
         // fix Safari letter-spacing bug when styles applied in `head`
         // Trigger styles redraw by changing body display property to differentvalue and reverting it back to original.
         if ($body.hasClass('safari')){
              var original_display_value = $body.css('display');
              var different_display_value = 'initial' === original_display_value ? 'block' : 'initial';

              $body.css({ 'display': different_display_value });

              setTimeout(function() {
                   $body.css({ 'display': original_display_value });
              }, 0);
         }
});

We have contacted them about it in April (2018), also Safari, but the error still doesn't seem to be resolved. This code causes an bug, which makes our slider not to show up, so you have to remove it from your website. We have seen it in multiple files, like this one: /wp-content/themes/Divi/js/custom.min.js
with similar codes:

but to be sure you are deleting the code from the proper file, use Chrome on your website, where the problem is happening press F12 →  click on search:

Try to find the error causing code:

Click on the code to see it in the developer tool:

Click on this little icon if the code is minified, meaning it isn't readable:

and you can search here too, to find the given code:

If you got it, you can open the link up on a new tab or copy the link address to identify where the file comes from:

Make a backup of the file, then remove the wrong codepart.

If you have the latest Divi version, we also suggest contacting Divi, so you would be able to update your theme without having to modify this file over and over again.

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.

Transparent overlay from transparent black to black.

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 3.4.1.9 until Safari can handle it well.

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 you have 2 sliders below each other, and the bottom one is pulled on the top one using negative margins, the second slider flashes, usually after slide switching.

Workaround

Remove the code that moves the bottom slider over the top one.

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