Govuk-frontend: Improve rendering in older Internet Explorer

Created on 8 Jan 2019  路  3Comments  路  Source: alphagov/govuk-frontend

First timers only

This issue is reserved for people who have never contributed to the GOV.UK Design System before, please only pick this up if you're a new contributor.

Description

The GOV.UK Design System has a template which has the main wrapper for the page with the header, skip link and footer.

It also contains meta tags in the <head>, one example of this is the theme-color meta tag, which sets the browser navigation colour in certain browsers on mobile.

We need to add another tag which ensures that older IE (Internet Explorer) versions always uses the latest rendering engines.

You can read the original discussion for this for more context.

This can be done by adding another meta tag relating to IE in the <head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

This code exists in the src directory and is called template.njk.

Step by Step

1. Claim this issue

Comment below to let other people know that you're working on this issue.

2. Fork the repository

3. Update the template.njk file

<!DOCTYPE html>
<html lang="{{ htmlLang | default('en') }}" class="govuk-template {{ htmlClasses }}">
  <head>
    <meta charset="utf-8" />
    <title>{% block pageTitle %}GOV.UK - The best place to find government services and information{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="{{ themeColor | default('#0b0c0c') }}" /> {# Hardcoded value of $govuk-black #}
+   {# Ensure that older IE versions always render with the correct rendering engine #}
+   <meta http-equiv="X-UA-Compatible" content="IE=edge" />

You can then run the review application to test the template changes.

4. Create a Pull Request

5. Update the CHANGELOG

Since this is a change that is fixing an issue in IE8, we need to add a changelog entry that references this new pull request.

We can do this on your behalf if you'd like.

5. Done

We'll review the Pull Request and let you know if any changes are needed.

Questions

If you鈥檝e got a question, you can comment in this issue or email the Design System team on [email protected]

first-timers-only
Source
picture nickcolley

Most helpful comment

I will be working on this issue.

picture bsushmith on 8 Jan 2019
👍3

All 3 comments

I will be working on this issue.

bsushmith picture bsushmith on 8 Jan 2019
👍3

@nickcolley I have created a pull request #1119 with updates to the changelog.md. Can you please review. Thank you

bsushmith picture bsushmith on 8 Jan 2019

@bsushmith thanks again for helping with this and sorting it so quickly!

nickcolley picture nickcolley on 10 Jan 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

36degrees picture 36degrees  路  10Comments
abbott567 picture abbott567  路  7Comments
gazjoy picture gazjoy  路  5Comments
penx picture penx  路  7Comments
kr8n3r picture kr8n3r  路  7Comments