Merge pull request #152 from lineupjs/sgratzl/safari

work on safari translate3d issues

src/styles/_lineup.scss

@@ -12,6 +12,7 @@
 @import './datatypes';
 @import './taggle/index';
 @import './supported_browser';
+@import './safari';
 
 .#{$lu_css_prefix} {
   position: relative;

src/styles/_safari.scss

@@ -0,0 +1,15 @@
+// safari 10+ only
+// see https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome#25975282
+
+@import './vars';
+
+$lu_safari_check: 0.001dpcm;
+
+@media not all and (min-resolution: $lu_safari_check) {
+  @supports (-webkit-appearance: none) {
+    .#{$engine_css_prefix}-header,
+    .#{$lu_css_prefix}-side-panel {
+      transform: unset;
+    }
+  }
+}

src/ui/dialogs/DialogManager.ts

@@ -25,7 +25,8 @@ export default class DialogManager {
   setHighlight(mask: { left: number, top: number, width: number, height: number }) {
     const area = <HTMLElement>this.node.firstElementChild;
     // @see http://bennettfeely.com/clippy/ -> select `Frame` example
-    area.style.clipPath = `polygon(
+    // use webkit prefix for safari
+    area.style.clipPath = (<any>area.style).webkitClipPath = `polygon(
       0% 0%,
       0% 100%,
       ${mask.left}px 100%,