Skip to content

Commit

Permalink
Use conditional comments for header fallback PNG
Browse files Browse the repository at this point in the history 
The current fallback uses an `<image>` 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 `<image>` 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 `<img>` 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
  • Loading branch information
@36degrees
36degrees committed May 17, 2021
1 parent f084ce6 commit cf4790b
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 22 deletions.
16 changes: 5 additions & 11 deletions src/govuk/components/header/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<div class="govuk-header__logo">
<a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
<!--[if gt IE 8]><!-->
{#- We use an inline SVG for the crown so that we can cascade the
currentColor into the crown whilst continuing to support older browsers
which do not support external SVGs without a Javascript polyfill. This
Expand All @@ -29,18 +30,11 @@
fill="currentColor" fill-rule="evenodd"
d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
></path>
{#- Fallback PNG image for older browsers.
The <image> element is a valid SVG element. In SVG, you would specify
the URL of the image file with the xlink:href – as we don't reference an
image it has no effect. It's important to include an empty data URI
as the xlink:href attribute as this prevents versions of IE which
support SVG from downloading the fallback image when they don't need to.
In other browsers <image> is synonymous for the <img> tag and will be
interpreted as such, displaying the fallback image. #}
<image src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" xlink:href="data:," display="none" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>
</svg>
<!--<![endif]-->
<!--[if IE 8]>
<img src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
<![endif]-->
<span class="govuk-header__logotype-text">
GOV.UK
</span>
Expand Down
13 changes: 2 additions & 11 deletions src/govuk/components/header/template.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,17 +218,8 @@ describe('header', () => {
describe('fallback PNG', () => {
const $fallbackImage = $('.govuk-header__logotype-crown-fallback-image')

it('uses the <image> tag which is a valid SVG element', () => {
expect($fallbackImage[0].tagName).toEqual('image')
})

it('sets an empty data URI xlink:href to prevent IE from downloading both the SVG and the PNG', () => {
// Cheerio converts xhref to href - https://github.com/cheeriojs/cheerio/issues/1101
expect($fallbackImage.attr('href')).toEqual('data:,')
})

it('hides the image when SVG is supported by using the SVG display attribute', () => {
expect($fallbackImage.attr('display')).toEqual('none')
it('is invisible to modern browsers', () => {
expect($fallbackImage.length).toEqual(0)
})
})
})
Expand Down

0 comments on commit cf4790b

Please sign in to comment.