From 449d51271f3b7a6d569ac37f278061a33e89be1f Mon Sep 17 00:00:00 2001
From: Robert Bolender <robert.bolender@faithlife.com>
Date: Tue, 4 Sep 2018 17:11:46 -0700
Subject: [PATCH] Disable popover GPU acceleration on Windows

Related to Bootstrap bug: https://github.com/twbs/bootstrap/issues/22610
---
 components/bootstrap/base-components.jsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/bootstrap/base-components.jsx b/components/bootstrap/base-components.jsx
index 0de4d024e..daac67d11 100644
--- a/components/bootstrap/base-components.jsx
+++ b/components/bootstrap/base-components.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable import/no-default-export */
 import * as _Bootstrap from 'reactstrap';
 import styled from 'styled-components';
+import React from 'react';
 import { wrapBootstrap } from '../utils';
 
 const inlineComponents = ['Button'];
@@ -49,6 +50,23 @@ const Components = Object.keys(_Bootstrap)
 		{},
 	);
 
+function withGpuAccelerationDisabled(Popover) {
+	return props => (
+		<Popover
+			{...props}
+			modifiers={{
+				computeStyle: {
+					gpuAcceleration: !(
+						typeof window !== `undefined` &&
+						window.devicePixelRatio < 1.5 &&
+						/Win/.test(navigator.platform)
+					),
+				},
+			}}
+		/>
+	);
+}
+
 export default {
 	...Components,
 	Label: styled(_Bootstrap.Label)`
@@ -58,7 +76,7 @@ export default {
 			margin-bottom: 0.375rem;
 		}
 	`,
-	Popover: styled(_Bootstrap.Popover)`
+	Popover: styled(withGpuAccelerationDisabled(_Bootstrap.Popover))`
 		&& {
 			box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.12);
 		}