From 721837e61ca99a1619b23af9592f2f3cacc5da98 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Sat, 10 Dec 2016 12:19:01 +0000 Subject: [PATCH 1/2] =?UTF-8?q?Don=E2=80=99t=20show=20hero=20image=20on=20?= =?UTF-8?q?IE8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit IE8 doesn’t support background-size, so the image appears too big, the text overlaps it, and everything becomes a mess. --- app/assets/stylesheets/views/product-page.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/assets/stylesheets/views/product-page.scss b/app/assets/stylesheets/views/product-page.scss index cb3d9096e..693304c37 100644 --- a/app/assets/stylesheets/views/product-page.scss +++ b/app/assets/stylesheets/views/product-page.scss @@ -12,10 +12,16 @@ @extend %site-width-container; @include media(desktop) { + background-image: file-url('product/proposition-illustration.png'); background-size: 320px; background-repeat: no-repeat; background-position: right -14px top -10px; + + @include ie-lte(8) { + background-image: none; + } + } } From c45c70c77102fc3818a21f1d9fc52bd66ebd102a Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Sat, 10 Dec 2016 12:19:15 +0000 Subject: [PATCH 2/2] Make SVGs 100% wide MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Internet Explorer 11 and below don’t scale SVG images properly when they’re used in `` tags. See https://gist.github.com/larrybotha/7881691 for details. This manifested itself as the SVG images on the product page being smaller when viewed in IE11 than other browsers. This commit explicitly sets them the be 100% wide, which seems to fix the problem. --- app/assets/stylesheets/views/product-page.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/views/product-page.scss b/app/assets/stylesheets/views/product-page.scss index 693304c37..d49b63aa8 100644 --- a/app/assets/stylesheets/views/product-page.scss +++ b/app/assets/stylesheets/views/product-page.scss @@ -90,7 +90,7 @@ } img { - max-width: 100%; + width: 100%; margin: 0 0 $gutter * 1.5 0; }