Force repaint to make Safari render buttons correctly

frontend/src/metabase/lib/dom.js

@@ -208,3 +208,10 @@ export function constrainToScreen(element, direction, padding) {
     }
     return false;
 }
+
+// Used for tackling Safari rendering issues
+export function forceRedraw(domNode) {
+    domNode.style.display='none';
+    domNode.offsetHeight;
+    domNode.style.display='';
+}
\ No newline at end of file

frontend/src/metabase/query_builder/components/filters/OperatorSelector.jsx

 /* @flow */
 
 import React, { Component } from "react";
+import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
-
-import Icon from "metabase/components/Icon.jsx";
-
 import cx from "classnames";
 import _ from "underscore";
 
+import {forceRedraw} from "metabase/lib/dom";
+
+import Icon from "metabase/components/Icon.jsx";
+
 import type { Operator, OperatorName } from "metabase/meta/types/Metadata"
 
 type Props = {
@@ -39,6 +41,15 @@ export default class OperatorSelector extends Component<*, Props, State> {
         onOperatorChange: PropTypes.func.isRequired
     };
 
+    expandOperators = () => {
+        this.setState({ expanded: true });
+
+        // HACK: Address Safari rendering bug which causes https://github.com/metabase/metabase/issues/5075
+        setTimeout(() => {
+            forceRedraw(ReactDOM.findDOMNode(this));
+        }, 0);
+    };
+
     render() {
         let { operator, operators } = this.props;
         let { expanded } = this.state;
@@ -65,7 +76,7 @@ export default class OperatorSelector extends Component<*, Props, State> {
                     </button>
                 )}
                 { !expanded && expandedOperators.length > 0 ?
-                    <div className="text-grey-3 cursor-pointer" onClick={() => this.setState({ expanded: true })}>
+                    <div className="text-grey-3 cursor-pointer" onClick={this.expandOperators}>
                         <Icon className="px1" name="chevrondown" size={14} />
                         More Options
                     </div>