From 766487bfe3bfdfabb73068401536ca03aa115e0d Mon Sep 17 00:00:00 2001
From: Eddie Kohler <ekohler@gmail.com>
Date: Tue, 1 Aug 2017 23:37:52 -0400
Subject: [PATCH] Solve Safari rendering issues with font-size overrides.
 (#780)

Some delicate surgery is required on the `vlist-s` table-cell CSS.
Problem with #768 reported by @ronkok; issue #779. Fixes:

* `font-size: 1px` (rather than `font-size: 0.05em`) solves render
  issues with user overrides of the `.katex` `font-size`.
* Also fix a width issue.
---
 src/buildCommon.js |  3 +++
 static/katex.less  | 23 +++++++++++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/buildCommon.js b/src/buildCommon.js
index 93c62742..1f384e8d 100644
--- a/src/buildCommon.js
+++ b/src/buildCommon.js
@@ -386,6 +386,9 @@ const makeVList = function(children, positionType, positionData, options) {
     }
 
     const vtable = makeSpan(["vlist-t"], rows);
+    if (rows.length === 2) {
+        vtable.classes.push("vlist-t2");
+    }
     vtable.height = maxPos;
     vtable.depth = -minPos;
     return vtable;
diff --git a/static/katex.less b/static/katex.less
index 6a43b8c1..98a0aa16 100644
--- a/static/katex.less
+++ b/static/katex.less
@@ -241,12 +241,6 @@
         display: table-row;
     }
 
-    .vlist-s {
-        display: table-cell;
-        vertical-align: bottom;
-        font-size: 0.05em;
-    }
-
     .vlist {
         display: table-cell;
         vertical-align: bottom;
@@ -268,6 +262,23 @@
         }
     }
 
+    .vlist-t2 {
+        margin-right: -2px;
+    }
+
+    .vlist-s {
+        // This cell solves Safari rendering problems. It has text content, so
+        // its baseline is used for the table. A very small font avoids line-box
+        // issues; absolute units prevent user font-size overrides from breaking
+        // rendering. Safari refuses to make the box zero-width, so we give it
+        // a known width and compensate with negative right margin on the
+        // inline-table.
+        display: table-cell;
+        vertical-align: bottom;
+        font-size: 1px;
+        width: 2px;
+    }
+
     .msupsub {
         text-align: left;
     }