From 62bc5329ecdff40c4300504dc69a5af0cb147fc5 Mon Sep 17 00:00:00 2001
From: Ray Kraesig <rkraesig@zulipchat.com>
Date: Thu, 14 Nov 2019 14:27:02 -0800
Subject: [PATCH] webview/katex: Add hack so `\frac` lines don't disappear.

KaTeX `.frac-line`s don't show up on some of our Android test devices
and emulators. (This seems to be a perennial problem for KaTeX. See
the commit-internal comments for references.)

Resolve this by forcing all such lines to be 1px wide, disregarding
the TeXbook spec.
---
 src/webview/css/css.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/webview/css/css.js b/src/webview/css/css.js
index 0440b418140..9d92dfbc797 100644
--- a/src/webview/css/css.js
+++ b/src/webview/css/css.js
@@ -1,9 +1,27 @@
 /* @flow strict-local */
+import { Platform } from 'react-native';
 import type { ThemeName } from '../../types';
 import cssPygments from './cssPygments';
 import cssEmojis from './cssEmojis';
 import cssNight from './cssNight';
 
+/**
+ * Fix KaTeX frac-line elements disappearing.
+ *
+ * This is a hack, but it's probably better than not having fraction lines on
+ * low-resolution phones. It's only known to be useful under Chrome and Android,
+ * so we only include it there.
+ *
+ * See, among others:
+ *   https://github.com/KaTeX/KaTeX/issues/824
+ *   https://github.com/KaTeX/KaTeX/issues/916
+ *   https://github.com/KaTeX/KaTeX/pull/1249
+ *   https://github.com/KaTeX/KaTeX/issues/1775
+ */
+const katexFraclineHackStyle = `<style id="katex-frac-line-hack">
+.katex .mfrac .frac-line { border-bottom-width: 1px !important; }
+</style>`;
+
 export default (theme: ThemeName) => `
 <link rel='stylesheet' type='text/css' href='./base.css'>
 <link rel='stylesheet' type='text/css' href='./katex/katex.min.css'>
@@ -17,5 +35,6 @@ ${cssEmojis}
   display: none;
 }
 </style>
+${Platform.OS === 'android' ? katexFraclineHackStyle : '<!-- Safari -->'}
 <style id="generated-styles"></style>
 `;