Safari needs -webkit- prefix for clip-path

xoseperez · Jul 5, 2018 · 712cbe4 · 712cbe4
1 parent b44258a
commit 712cbe4
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/code/html/custom.css b/code/html/custom.css
@@ -267,6 +267,7 @@ span.slider {
 .inner-container:nth-child(2) {
  background: #c00000;
  color: white;
+ -webkit-clip-path: inset(0 50% 0 0);
  clip-path: inset(0 50% 0 0);
  transition: .3s cubic-bezier(0,0,0,1);
 }

diff --git a/code/html/custom.js b/code/html/custom.js
@@ -820,10 +820,12 @@ function initCheckboxes() {
  var setCheckbox = function(element, value) {
  var container = $(".toggle-container", $(element));
  if (value) {
- container.css("clipPath", "inset(0 0 0 50%)");
+ container.css("-webkit-clip-path", "inset(0 0 0 50%)");
+ container.css("clip-path", "inset(0 0 0 50%)");
  container.css("backgroundColor", "#00c000");
  } else {
- container.css("clipPath", "inset(0 50% 0 0)");
+ container.css("-webkit-clip-path", "inset(0 50% 0 0)");
+ container.css("clip-path", "inset(0 50% 0 0)");
  container.css("backgroundColor", "#c00000");
  }
  }