From 257a2308ee6fc576e22ec89c16e85c0b39abfbb1 Mon Sep 17 00:00:00 2001
From: Timothy Farrell <tim@thecookiejar.me>
Date: Fri, 8 Dec 2017 22:18:12 -0600
Subject: [PATCH] A futile attempt to fix a rendering bug in chrome.

When images are selected and you scroll such that the drop shadow paints...sometimes it will make the selection buttons not paint.
---
 .../src/interface/components/albumPhotoTemplate.js        | 3 ++-
 packages/gallery/src/interface/components/appbar.js       | 8 ++++++--
 packages/gallery/src/interface/gallery.js                 | 8 +++++++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/gallery/src/interface/components/albumPhotoTemplate.js b/packages/gallery/src/interface/components/albumPhotoTemplate.js
index fd4667b..61378cd 100644
--- a/packages/gallery/src/interface/components/albumPhotoTemplate.js
+++ b/packages/gallery/src/interface/components/albumPhotoTemplate.js
@@ -84,7 +84,8 @@ const photoContainer = styled({
 const image = styled('img', CSS_FULL_SIZE, DEFAULT_TRANSITION, {
 	position: 'absolute',
 	top: 0,
-	left: 0
+	left: 0,
+	zIndex: 0
 });
 
 const photoSelectButton = styled(DEFAULT_TRANSITION, {
diff --git a/packages/gallery/src/interface/components/appbar.js b/packages/gallery/src/interface/components/appbar.js
index 29e215c..92ecbff 100644
--- a/packages/gallery/src/interface/components/appbar.js
+++ b/packages/gallery/src/interface/components/appbar.js
@@ -32,7 +32,7 @@ export function AppBarView(vm, params, key, opts) {
 			{
 				css: { boxShadow: boxShadowStyle() }
 			},
-			[el('div', { style: 'font-size: 20pt' }, title), headerRight(renderButtons()())]
+			[titleContainer(title), headerRight(renderButtons()())]
 		);
 	};
 }
@@ -40,7 +40,7 @@ export function AppBarView(vm, params, key, opts) {
 const header = styled({
 	justifyContent: 'space-between',
 	padding: '1em',
-	zIndex: 1,
+	zIndex: 1000,
 	display: 'flex',
 	alignItems: 'center'
 });
@@ -49,3 +49,7 @@ const headerRight = styled({
 	display: 'flex',
 	alignItems: 'center'
 });
+
+const titleContainer = styled({
+	fontSize: '20pt'
+});
diff --git a/packages/gallery/src/interface/gallery.js b/packages/gallery/src/interface/gallery.js
index 0502d99..f4bf2dd 100644
--- a/packages/gallery/src/interface/gallery.js
+++ b/packages/gallery/src/interface/gallery.js
@@ -101,4 +101,10 @@ const FILL_STYLE = {
 };
 const fill = injectStyle(FILL_STYLE);
 
-const content = styled({ overflow: 'auto' }, FILL_STYLE);
+const content = styled(
+	{
+		overflow: 'scroll',
+		['-webkit-transform']: 'translate3d(0,0,0);' // http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/
+	},
+	FILL_STYLE
+);