From f084ce6202b4a953966d4e97deabe8e9edfdef0a Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 17 May 2021 10:15:21 +0100 Subject: [PATCH 1/3] Fix alignment of fallback image in header --- src/govuk/components/header/_index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/govuk/components/header/_index.scss b/src/govuk/components/header/_index.scss index 93717a1bb1..c25dd1782b 100644 --- a/src/govuk/components/header/_index.scss +++ b/src/govuk/components/header/_index.scss @@ -62,7 +62,7 @@ width: 36px; height: 32px; border: 0; - vertical-align: middle; + vertical-align: bottom; } .govuk-header__product-name { From cf4790bc57da93c5c7e11052d54505440135ed90 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Mon, 17 May 2021 15:04:30 +0100 Subject: [PATCH 2/3] Use conditional comments for header fallback PNG MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The current fallback uses an `` element, which is interpreted differently depending on whether it’s parsed in the context of SVG or HTML. We include an `xlink:href` attribute on the `` tag to prevent versions of IE which support SVG from downloading the fallback image when they don't need to. However, this approach has proved problematic – IE11 still requests the fallback PNG when printing, which can cause issues with sessions (#2045) and an attempted fix for that issue by using a blank data uri has now caused further issues with Content Security Policies (#2203). Switch to the simpler approach of using conditional comments for the header fallback PNG, targeting Internet Explorer 8 specifically. We can then use a good old-fashioned `` tag. This does mean that browsers that do not support SVG other than Internet Explorer 8 will not be able to see the crown emblem. According to Can I Use, the other main browser that does not support SVG that we may need to consider is Android 2.1 - 2.3 [1]. Between 2020-05-14 and 2021-04-30 analytics for GOV.UK shows 6,792 (0.00041%) sessions from 4,343 (0.00119%) users using Android 2.x, out of 577,929,096 sessions from 77,144,107 users. By comparison, in the same period we saw 36,075 sessions (0.00217%) from 28,963 users (0.00791%) using IE8. It appears that Android 2.x browsers just omit the SVG entirely – there’s no ‘broken image’ displayed – these users just see ‘GOV.UK’ without the crown. Given the very low volume of traffic from these browsers, this seems like an acceptable thing to do. We could have removed the fallback PNG entirely, however our browser support explicitly states support for Internet Explorer 8 (‘although components may not look perfect’) and we know that some service teams do have a disproprtionate number of IE8 users – which is unlikely to be the case for Android 2. [1]:https://caniuse.com/svg --- src/govuk/components/header/template.njk | 16 +++++----------- src/govuk/components/header/template.test.js | 13 ++----------- 2 files changed, 7 insertions(+), 22 deletions(-) diff --git a/src/govuk/components/header/template.njk b/src/govuk/components/header/template.njk index e00d605040..b54d9cc423 100644 --- a/src/govuk/components/header/template.njk +++ b/src/govuk/components/header/template.njk @@ -4,6 +4,7 @@