[Solved] CSS Clip-path using SVG Polygons doesn’t work well on Safari

Problem: Revolution Slider SVG Scroll Down button is not showing on Safari at Desktop, iPad, and iPhone browser.

My Revolution Slider SVG Polygon Scroll Down button is working great in Firefox and Chrome but when it’s come to Safari it completely has gone. See the screenshot

Solution: How to fix CSS Clip-path Polygon on Safari browser

I’ve found that Revolution Slider uses CSS Clip-path property to design this Scroll Down button and this is causing the problem as Safari didn’t support the CSS Clip-path property fully. CanIUse.com reports partial support for Safari if using the -webkit- prefix: http://caniuse.com/#search=clip-path.
So you need the -webkit- prefix to work clip-path property on Safari.

Step #1: Find the CSS selector

First, you need the CSS Selector. You can get the CSS selector by the Inspect element (see the screenshot).
In my case it’s .main-slider.style-six:after

Step #2:

Copy the existing clip-path property. we’ll add a prefix of -webkit- to the clip-path property.

-webkit-clip-path: polygon(0% 26%, 100% 100%, 100% 100%, 0% 100%, 0% 0%);

Step #3:

Go to your child theme style.css file or Appearance >> Customize >> Additional CSS and paste the code. Please replace the CSS Selector and clip-path property value with your own value.

.main-slider.style-six:after{
	-webkit-clip-path: polygon(0% 26%, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
}

Final Result:

CSS Clip-path SVG polygon Scroll down button issue is fixed in Safari. See it looks the same as Chrome.

I hope it helps you to fix your Revolution slider Scroll down button or any other CSS clip-path related issue in the Safari browser for all Desktop, iPad, and iPhone.