ENGCOM-5536: Fix horizontal media gallery thumbnails pixelated #23884

sidolov · web-flow · commit 3ac5cdf37312 · 2019-08-07T15:56:32.000-05:00
diff --git a/lib/web/mage/gallery/gallery.less b/lib/web/mage/gallery/gallery.less
@@ -697,8 +697,8 @@
     }
     .fotorama_horizontal_ratio {
         .fotorama__img {
-            .translateX(-50%);
-            height: 100%;
+            .translate(-50%, -50%);
+            top: 50%;
             left: 50%;
             position: absolute;
             width: auto;
diff --git a/lib/web/mage/gallery/module/_mixins.less b/lib/web/mage/gallery/module/_mixins.less
@@ -30,6 +30,13 @@
     transform: translateY(@value);
 }
 
+.translate(@x, @y) {
+    -webkit-transform: translate(@x, @y);
+    -ms-transform: translateY(@x, @y);
+    -o-transform: translateY(@x, @y);
+    transform: translateY(@x, @y);
+}
+
 .fotorama-shadow-gradient(@x, @y) {
     background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), radial-gradient(farthest-side at @x @y, rgba(0, 0, 0, 0.4), transparent);
 }

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,13 @@`
`30`	`30`	`transform: translateY(@value);`
`31`	`31`	`}`
`32`	`32`
	`33`	`+.translate(@x, @y) {`
	`34`	`+ -webkit-transform: translate(@x, @y);`
	`35`	`+ -ms-transform: translateY(@x, @y);`
	`36`	`+ -o-transform: translateY(@x, @y);`
	`37`	`+ transform: translateY(@x, @y);`
	`38`	`+}`
	`39`	`+`
`33`	`40`	`.fotorama-shadow-gradient(@x, @y) {`
`34`	`41`	`background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.3) 75%, transparent), radial-gradient(farthest-side at @x @y, rgba(0, 0, 0, 0.4), transparent);`
`35`	`42`	`}`