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.

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, {

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'
+});

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
+);