From e0a637358df9f293b5592b228de9f05969e2a69d Mon Sep 17 00:00:00 2001
From: Gaya Kessler <gaya.kessler@gmail.com>
Date: Fri, 21 Oct 2016 15:23:46 +0200
Subject: [PATCH] Add Safari overlay position fix (#178)

Fix for blurry image rendering in OS X Safari
---
 src/css/_fluidbox.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/css/_fluidbox.scss b/src/css/_fluidbox.scss
index 389eb7b..5d5f320 100644
--- a/src/css/_fluidbox.scss
+++ b/src/css/_fluidbox.scss
@@ -21,9 +21,10 @@ $fluidbox__animation-bg-color: $fluidbox__overlay-bg-color !default;
 	opacity: 0;
 	pointer-events: none;
 	position: fixed;
-	top: 0;
+	/* Negative top and bottom is to fix some Safari cases where image got blurry */
+	top: -100%;
 	left: 0;
-	bottom: 0;
+	bottom: -100%;
 	right: 0;
 	/* Transition time for overlay is halved to ensure that flickering doesn't happen */
 	transition: all $fluidbox__transition-duration ease-in-out;
@@ -101,4 +102,4 @@ $fluidbox__animation-bg-color: $fluidbox__overlay-bg-color !default;
 	&::before {
 		animation: fluidboxLoading 1s 0s infinite ease-in-out forwards;
 	}
-}
\ No newline at end of file
+}