Elastic: Fix Firefox sub-pixel positioning issues

... by using size values rounded in less - in most prominent places.
There's still problem with form controls padding, but we'll work on this
when really needed.

4 files changed, 40 insertions, 35 deletions

diff --git a/skins/elastic/styles/variables.less b/skins/elastic/styles/variables.less
index 1d9f720b6..7e1968dfb 100644
--- a/skins/elastic/styles/variables.less
+++ b/skins/elastic/styles/variables.less
@@ -24,18 +24,21 @@
 @page-font-size:        14px;
 @page-min-width:        240px;
 
-@layout-menu-width:                     5.6rem;
-@layout-menu-width-sm:                  3rem;
-@layout-header-height:                  4.2rem;
+// Note: we'll set some values in pixels instead of rem to eliminate
+//       Firefox sub-pixel rendering bug(s)
+
+@layout-menu-width:                     floor(5.6 * @page-font-size);
+@layout-menu-width-sm:                  floor(3 * @page-font-size);
+@layout-header-height:                  floor(4.2 * @page-font-size);
 @layout-footer-height:                  @layout-header-height;
-@layout-footer-small-height:            2.5rem;
+@layout-footer-small-height:            floor(2.5 * @page-font-size);
 @layout-header-font-size:               1rem;
-@layout-searchbar-height:               2.6rem;
+@layout-searchbar-height:               floor(2.6 * @page-font-size);
 
 @layout-touch-header-height:            @layout-header-height;
-@layout-touch-header-font-size:         1.2rem;
-@layout-touch-menu-record-height:       3.4rem;
-@layout-touch-menu-record-font-size:    1.2rem;
+@layout-touch-header-font-size:         floor(1.2 * @page-font-size);
+@layout-touch-menu-record-height:       floor(3.4 * @page-font-size);
+@layout-touch-menu-record-font-size:    floor(1.2 * @page-font-size);
 @layout-touch-icon-width:               2.2em;
 
 @layout-mobile-menu-width:              (@screen-width-mini * .85);
@@ -43,11 +46,11 @@
 @layout-contact-icon-width:             112px;
 @layout-contact-icon-height:            135px;
 
-@listing-line-height:           2.5rem;
-@listing-touch-line-height:     3.4rem;
-@listing-treetoggle-width:      1.5em;
+@listing-line-height:                   floor(2.5 * @page-font-size);
+@listing-touch-line-height:             floor(3.4 * @page-font-size);
+@listing-treetoggle-width:              1.5em;
 
-@mail-header-photo-height:      4rem;
+@mail-header-photo-height:              4rem;
 
 // Additional icons
 @icon-resize-corner:    data-uri("image/svg+xml;charset=utf-8", "../images/corner-handle.svg"); // size: 512x512
diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index 46827dfe9..54d4b65d7 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/skins/elastic/styles/widgets/forms.less
@@ -483,7 +483,7 @@ html.ms .propform {
 
         .form-control-plaintext,
         label.col-form-label {
-            padding: .375rem .375rem .375rem 0;
+            padding: floor(.375 * @page-font-size) floor(.375 * @page-font-size) floor(.375 * @page-font-size) 0;
         }
 
         .form-control-plaintext {
@@ -602,7 +602,7 @@ html.ms .propform {
 /* Some common icons for "iconized inputs" */
 .input-group .icon {
     text-decoration: none;
-    padding: .375rem .5rem;
+    padding: floor(.375 * @page-font-size) .5rem;
 
     &.input-group-text {
         min-width: 2.4rem;
@@ -708,7 +708,7 @@ html.ms .propform {
     .custom-control-label {
         &:before,
         &:after {
-            margin: -.15rem 0 0 0;
+            margin: calc(floor(.15 * @page-font-size) * -1) 0 0 0;
         }
     }
 
@@ -917,7 +917,7 @@ html.ms .propform {
 
 /*** Smart recipient input field ***/
 
-@recipient-input-margin-fix: .25rem;
+@recipient-input-margin-fix: round(.25 * @page-font-size);
 
 .recipient-input {
     display: flex;
@@ -955,7 +955,7 @@ html.ms .propform {
         flex-grow: 1;
         display: inline-block;
         line-height: 1.1;
-        padding: .25rem;
+        padding: floor(.25 * @page-font-size);
         vertical-align: middle;
     }
 
@@ -1305,7 +1305,7 @@ html.ms .propform {
         &:before,
         &:after {
             border-radius: .6rem;
-            margin: .15rem 0;
+            margin: floor(.15 * @page-font-size) 0;
 
             html.touch & {
                 border-radius: .8rem;
@@ -1315,34 +1315,36 @@ html.ms .propform {
 
         &:before {
             left: 2px;
-            width: 2rem;
-            height: 1.2rem;
+            top: 4px;
+            width: floor(1.9 * @page-font-size);
+            height: floor(1.2 * @page-font-size);
 
             html.touch & {
-                top: .2rem;
-                width: 2.6rem;
-                height: 1.6rem;
+                top: floor(.2 * @page-font-size);
+                width: floor(2.5 * @page-font-size);
+                height: floor(1.6 * @page-font-size);
             }
         }
 
         &:after {
             left: 4px;
-            width: ~"calc(1.2rem - 4px)";
-            height: ~"calc(1.2rem - 4px)";
+            top: 6px;
+            width: floor(1.2 * @page-font-size) - 4;
+            height: floor(1.2 * @page-font-size) - 4;
 
             html.touch & {
-                top: ~"calc(.2rem + 2px)";
-                height: ~"calc(1.6rem - 4px)";
-                width: ~"calc(1.6rem - 4px)";
+                top: floor(.2 * @page-font-size) + 2;
+                height: floor(1.6 * @page-font-size) - 4;
+                width: floor(1.6 * @page-font-size) - 4;
             }
         }
     }
 
     .custom-control-input:checked ~ .custom-control-label::after {
-        transform: translateX(.8rem);
+        transform: translateX(floor(1.2 * @page-font-size) - 6);
 
         html.touch & {
-            transform: translateX(1rem);
+            transform: translateX(floor(1.6 * @page-font-size) - 9);
         }
     }
 
@@ -1364,7 +1366,7 @@ html.ms .propform {
     }
 
     & + .hint {
-        margin-top: .25rem;
+        margin-top: floor(.25 * @page-font-size);
     }
 }
 
diff --git a/skins/elastic/styles/widgets/jqueryui.less b/skins/elastic/styles/widgets/jqueryui.less
index cc0133900..e56233dd0 100644
--- a/skins/elastic/styles/widgets/jqueryui.less
+++ b/skins/elastic/styles/widgets/jqueryui.less
@@ -85,7 +85,7 @@
         top: 0;
         position: absolute;
         padding: .25rem .5rem;
-        margin: ((@layout-header-height - 2rem) / 2) .5rem;
+        margin: ((@layout-header-height - 2 * @page-font-size) / 2) .5rem;
 
         &:before {
             &:extend(.font-icon-class);
@@ -110,7 +110,7 @@
             button {
                 .overflow-ellipsis;
                 min-width: 5rem;
-                margin: .65rem .3rem;
+                margin: floor(.65 * @page-font-size) floor(.3 * @page-font-size);
 
                 &:last-child {
                     margin-right: 0;
diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less
index ecd9691e4..bb31e0ed7 100644
--- a/skins/elastic/styles/widgets/lists.less
+++ b/skins/elastic/styles/widgets/lists.less
@@ -484,7 +484,7 @@ ul.treelist {
                 right: 0;
                 min-width: 2em;
                 line-height: 1.4rem;
-                margin: (@listing-line-height - 1.4rem)/2;
+                margin: (@listing-line-height - 1.4 * @page-font-size) / 2;
                 padding: 0 .3em;
                 border-radius: .4em;
                 background: @color-list-badge-background;
@@ -494,7 +494,7 @@ ul.treelist {
 
                 html.touch & {
                     line-height: 2rem;
-                    margin: (@listing-touch-line-height - 2rem)/2;
+                    margin: (@listing-touch-line-height - 2 * @page-font-size) / 2;
                 }
             }