From 24773f0c65a0a4054bc9e13f348010ad8d6faab5 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Mon, 5 Aug 2019 15:20:12 +0300
Subject: [PATCH] ArticleCard hover effect refactored to width/height scale to
 fix Safari bug with transform+transition+border-radius

---
 src/components/ArticleCard.jsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/ArticleCard.jsx b/src/components/ArticleCard.jsx
index 7d37953b..c7319c95 100644
--- a/src/components/ArticleCard.jsx
+++ b/src/components/ArticleCard.jsx
@@ -31,13 +31,11 @@ const ArticleCard = ({ article }) => (
             .ArticleCard > a {
                     display: block;
                     position: relative;
-                //  height: 100%;
             }
 
             .ArticleCard-image {
                 overflow: hidden;
-                border-radius: 2px 2px 0 0;
-
+                position: relative;
                 width: 100%;
                 height: var(--article-card-image-height);
             }
@@ -47,7 +45,11 @@ const ArticleCard = ({ article }) => (
                 height: 100%;
                 object-fit: cover;
 
-                transition: transform 150ms ease-out;
+                transition: all 150ms ease-out;
+
+                position: absolute;
+                top: 0;
+                left: 0;
             }
 
             .ArticleCard-body {
@@ -68,7 +70,11 @@ const ArticleCard = ({ article }) => (
             }
 
             .ArticleCard:hover img {
-                transform: scale(1.05);
+                width: 105%;
+                height: 105%;
+
+                top: -2.5%;
+                left: -2.5%;
             }
 
             // Tablet