search

nhsuk / nhsuk-frontend

NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.
https://nhsuk.github.io/nhsuk-frontend/
MIT License
623 stars 107 forks source link

NHS logo PNG fallback HTML validation errors #572

Closed chrimesdev closed 3 years ago

chrimesdev commented 4 years ago

Description

The NHS (SVG) logo in the Header has a PNG fallback for Internet Explorer 8 (which doesn't support SVG logos). The way we do this is by using the <image> element with a src attribute pointing to our PNG fallback, along with an empty xlink:href attribute to ensure that Internet Explorer 11/10 does not download both the SVG and the PNG logos. This is following the guidance on: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-inline-svg-imgtag

"In most browsers, therefore, it is sufficient to include an tag with a src attribute (pointing to your fallback image) inside your inline SVG: the old browsers will download the fallback, the new browsers won't. Except for Internet Explorer, which downloads the fallback image even when it doesn't display it. The solution is to put a null xlink:href attribute on the element. The IE developer tools still show it requesting the fallback, but it aborts almost immediately (<1ms in IE11 or IE10/IE9 emulation mode), before downloading anything."

However when running the Header component (https://nhsuk.github.io/nhsuk-frontend/components/header/index.html) through an HTML validator (https://validator.w3.org/) there are 3 errors found on the <image> element:

Error: Attribute src not allowed on element image at this point. Error: Element image is missing required attribute height. Error: Element image is missing required attribute width.

The first error, attribute src not allowed on element image at this point, looks like it might be unavoidable validation error from early investigation (could be worth investigating further). But we could possibly look at adding an height and width attribute to the <image> fallback element to fix the remaining 2 errors.

Initially it looks like adding width="40" height="100" to <image src="https://assets.nhs.uk/images/nhs-logo.png" xlink:href="" width="40" height="100"></image> works fine. But when testing this on Internet Explorer 9 and 10, it gives an empty box overlaying the header:

Screenshot 2019-12-03 at 11 12 34

Setting the width and the height sizing with CSS on the fallback image doesn't seem to change much either. We could possibly display: none the fallback image on everything expect .ie8.

It would be good to investigate if we can fix any (or all) of these HTML validation errors.

Related

GOV.UK Frontend have managed to fix the height and width validation errors, without the strange empty box overlay, so this may be something to do with our SVG markup or styling. (https://github.com/alphagov/govuk-frontend/blob/master/package/govuk/components/header/template.njk#L42).

The attribute src not allowed on element image at this point error, seems to still be an issue there also.

mcheung-nhs commented 3 years ago

We will be looking to drop support for IE8 due to our very very low number of visitors (i.e. zero) using this browser so this will remove the png fallback.

mcheung-nhs commented 3 years ago

The png will be removed as part of https://github.com/nhsuk/nhsuk-frontend/pull/696

chrimesdev commented 3 years ago

This will be fixed in release 5.0.0 (next week)