Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set xlink:href on crown PNG fallback #1337

Merged
merged 2 commits into from
May 14, 2019
Merged

Set xlink:href on crown PNG fallback #1337

merged 2 commits into from
May 14, 2019

Conversation

When the header component was originally created in the Design System, we included the xlink:href attribute [1] to ensure that Internet Explorer did not download both the SVG and the PNG:

> "In most browsers, therefore, it is sufficient to include an <image> 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." [2]

When the component was moved to GOV.UK Frontend, this attribute was omitted[3]. This adds it back again.

Fixes #1299

[1]: https://github.com/alphagov/govuk-design-system/blob/ffdb3e7bdd5ce2c42dfe95979f9faa308d75a0d9/views/partials/_header.njk#L31
[2]: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/#fallback-inline-svg-imgtag
[3]: 8da2cb3
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1337 May 13, 2019 14:37 Inactive
@36degrees 36degrees added this to Needs review in Design System Sprint Board via automation May 13, 2019
Copy link
Contributor

@NickColley NickColley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, needs a CHANGELOG entry but otherwise good to go.

@36degrees 36degrees merged commit 840d019 into master May 14, 2019
Design System Sprint Board automation moved this from Needs review to Done May 14, 2019
@36degrees 36degrees deleted the xlink-href-svg branch May 14, 2019 10:32
@NickColley NickColley added this to the v2.12.0 milestone May 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

Documented xlink:href on SVG fallback image is… missing…
4 participants