Skip to content
This repository has been archived by the owner on Nov 21, 2023. It is now read-only.

Commit

Permalink
Add Safari overlay position fix (#178)
Browse files Browse the repository at this point in the history
Fix for blurry image rendering in OS X Safari
  • Loading branch information
Gaya authored and terrymun committed Oct 21, 2016
1 parent 47db04b commit e0a6373
Showing 1 changed file with 4 additions and 3 deletions.
7 changes: 4 additions & 3 deletions src/css/_fluidbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -101,4 +102,4 @@ $fluidbox__animation-bg-color: $fluidbox__overlay-bg-color !default;
&::before {
animation: fluidboxLoading 1s 0s infinite ease-in-out forwards;
}
}
}

0 comments on commit e0a6373

Please sign in to comment.