Merge pull request voidlabs#434 from voidlabs/safariworkaround

Refactored hover/selection styles to workaround Safari (WebKit) bugs

src/css/safarihack.css

@@ -19,16 +19,7 @@ So we broadened the application of this hack to include Chrome.
 After enabling the dashed outlines for editable contents we had reports from webkit based
 browsers (Safari) users of flickering similar to the previous issues.
   See: https://github.com/voidlabs/mosaico/issues/430
-Please note there is no space between "and" and the following bracket because we only
-want to tarket webkit (Safari) and not blink (Chrome).
+Then we separated semi-transparent hover effect from the selection effect into before/after so
+that we never have to change the opacity or the border size dynamically and this seems to make Safari
+happier.
 */
-@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media  {
-  #main-edit-area #main-wysiwyg-area:not(.isdragging):not(.isdraggingimg) .editable:hover .mce-content-body:not(.selecteditem):not(:hover):after,
-  #main-edit-area #main-wysiwyg-area:not(.isdragging):not(.isdraggingimg) .editable:hover .selectable-img:not(.selecteditem):not(:hover) .mo-imgselectionhelper {
-  	visibility: hidden !important;
-  	z-index: -1 !important;
-  	opacity: 1 !important;
-  	border-width: 0px 0px !important;
-    border-style: solid solid !important;
-  }
-}}

src/css/style_mosaico.less

@@ -125,58 +125,81 @@
   pointer-events: none;
 }
 
+// Note that we avoid altering border/outline widths/opacity on hover/selection because of Webkit bugs (see safarihacks.css)
 .makeSelectable(@size: 10px, @selectedSelector: ~'.selected', @selectedSize: 1px, @borderElementSelector: ~':after') {
   position: relative;
 
   &@{borderElementSelector} {
     content: "";
-    // display: none;
-    visibility: hidden;
+    display: block;
     position: absolute;
-    z-index: -1;
+    // z-index: 0;
     top: -3px; bottom: -3px;
-    // animation: border-color-selection-pulsate 4s infinite;
     left: -2px - @size;
     right: -2px - @size;
-    border-width: 0px 0px;
-    border-style: solid solid;
-    border-color: @mosaico-outline-color;
-    outline-color: @mosaico-outline-color;
-  }
-  &@{selectedSelector}@{borderElementSelector} {
-    display: block;
-    visibility: visible;
 
-    border: @selectedSize dashed @mosaico-selection-color;
+    // Use border for selection
+    border: 1px solid transparent;
+    border-width: @selectedSize;
     border-left-width: @size;
     border-right-width: @size;
+
+    // Use outline for hover effects
+    outline: 1px solid transparent;
+    // outline-offset: -1px;
+
+    // otherwise this catches clicks and prevent correct selection of underlying text
+    pointer-events: none;
+  }
+  &@{selectedSelector}@{borderElementSelector} {
+    outline-color: transparent;
+    // border: @selectedSize dashed @mosaico-selection-color;
+    // border-left-width: @size;
+    // border-right-width: @size;
+    border-color: @mosaico-selection-color;
     border-style: dashed solid;
     animation: border-color-selection-pulsate 4s infinite;
   }
   &:hover@{borderElementSelector} {
-    display: block;
-    visibility: visible;
-    outline-width: 1px;
-    outline-style: solid;
-    border-top-width: 0;
-    border-bottom-width: 0;
-  }
-
-  &:hover,
-  &@{selectedSelector} {
-    position: relative;
+    outline-color: @mosaico-outline-color;
+    border-top-color: transparent !important;
+    border-bottom-color: transparent !important;
+    animation: none;
   }
 
   &@{selectedSelector} {
     z-index: 10;
   }
-
   &:hover {
     z-index: 11;
   }
 
 }
 
+.makeEditableHover(@size, @editableSelector, @borderElementSelector: ~':before') {
+  @{editableSelector}@{borderElementSelector} {
+    content: "";
+    display: block;
+    position: absolute;
+    // z-index: 0;
+    top: -3px; bottom: -3px;
+    left: -7px; right: -7px;
+    border: 1px dashed transparent;
+    opacity: 0.3;
+
+    // otherwise this catches clicks and prevent correct selection of underlying text
+    pointer-events: none;
+  }
+
+  &:hover @{editableSelector}@{borderElementSelector} {
+    border-color: @mosaico-outline-color;
+  }
+
+  &:hover @{editableSelector}:hover@{borderElementSelector} {
+    border-color: transparent;
+  }
+}
+
 .resetFont() {
   font-family: @font-family;
   font-size: 16px;

src/css/style_mosaico_content.less

@@ -169,7 +169,7 @@
   z-index: 30; 
   position: absolute; 
   bottom: 16px;
-  width: 100%;
+  // width: 100%;
   text-align: left;
 }
 #main-edit-area .img-wysiwyg:hover .midtools {
@@ -212,7 +212,7 @@
 #main-edit-area .midtools {
   margin-left: 4px;
   .tool {
-    z-index: 20;
+    // z-index: 20;
     margin-left: 4px;
   }
 }
@@ -298,29 +298,19 @@
     // blocks
     .editable {
       .makeSelectable(10px, ~'.selected', 0, ~' .mo-blockselectionhelper');
-      &:hover {
-        // note that we use the same selector we used in the makeSelectable 4th parameter (defaulting to :after)
-        .mce-content-body:not(.selecteditem):not(:hover):after,
-        .selectable-img:not(.selecteditem):not(:hover) .mo-imgselectionhelper {
-          visibility: visible;
-          z-index: 0;
-          // outline-width: 1px;
-          // outline-style: dashed;
-          border-style: dashed;
-          border-width: 1px;
-          // background-color: currentColor;
-          opacity: 0.3;
-        }
-      }
+
+      .makeEditableHover(10px, ~'.mce-content-body');
+      .makeEditableHover(10px, ~'.selectable-img', ~' .mo-imgselectionhelper:before');
+
     }
     // texts
     .mce-content-body {
-      .makeSelectable(5px, ~'.selecteditem', 1px);
+      .makeSelectable(5px, ~'.selecteditem', 0);
       cursor: text;
     }
     // images
     .selectable-img {
-      .makeSelectable(5px, ~'.selecteditem', 1px, ~' .mo-imgselectionhelper');
+      .makeSelectable(5px, ~'.selecteditem', 0, ~' .mo-imgselectionhelper:after');
     }
   }