Fix display of checkboxes in Internet Explorer 8 #2228
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
We use the `before` and `after` pseudo-elements on the label for checkboxes to provide stylised checkboxes in modern browsers. Internet Explorer 8 does not support some of the features we use to do this, so we ‘fall back’ to the native HTML inputs instead. In 09ef79d we updated the before and after pseudo-elements in the checkboxes sass to use a single colon, which was newly enforced as part of a switch to stylelint. IE8 only supports the single-colon syntax [1], and it looks like we were actually relying on the double-colon syntax _not_ being interpreted by IE8 in order to prevent them being displayed in that browser. As a result, changing to a single-colon means that IE8 now interprets the pseudo-selectors, and as a result ends up with a malformed checkmark visible next to the native HTML input. Wrap the before and after pseduo-elements with the @govuk-not-ie8 mixin to exclude these rules from being included in the IE8 specific stylesheet. [1]: https://caniuse.com/css-gencontent
lfdebrux
approved these changes
May 17, 2021
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We use the
beforeandafterpseudo-elements on the label for checkboxes to provide stylised checkboxes in modern browsers.Internet Explorer 8 (IE8) does not support some of the features we use to do this, so we ‘fall back’ to the native HTML inputs instead.
In 09ef79d we updated the before and after pseudo-elements in the checkboxes sass to use a single colon, which was newly enforced as part of a switch to stylelint.
IE8 only supports the single-colon syntax, and it looks like we were actually relying on the double-colon syntax not being interpreted by IE8 in order to prevent them being displayed in that browser.
As a result, changing to a single-colon means that IE8 now interprets the pseudo-selectors, and as a result ends up with a malformed checkmark visible next to the native HTML input.
Wrap the before and after pseduo-elements with the
@govuk-not-ie8 mixinto exclude these rules from being included in the IE8 specific stylesheet.Before
After
Fixes #2227