-
Notifications
You must be signed in to change notification settings - Fork 20
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
Fix cookie banner issue (IE10) #2231
Conversation
@@ -101,6 +101,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; | |||
CookieBanner.prototype.showConfirmationMessage = function () { | |||
this.$cookieBannerMainContent = document.querySelector('.js-banner-wrapper') | |||
|
|||
this.$cookieBannerMainContent.style.display = 'none' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rather than doing this in the JavaScript, would adding:
[hidden] {
display: none;
}
to the CSS work?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should all already be handled by this code in GOV.UK Frontend:
I think the issue is that you're showing and hiding the cookie banner by setting display: block
rather than by toggling the hidden
attribute. The display: block;
inline styles is then overriding the CSS.
If you consistently use the hidden
attribute then this should all 'just work'.
There's a 'test' client-side implementation here if that helps (it's a lot simpler as it doesn't actually read or store cookies):
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
According to caniuse hidden
isn't supported by IE10? https://caniuse.com/hidden
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IE10 and older have no native support for the attribute, but the [hidden]
attribute selector works just fine in CSS, which means we can make it work with just:
.govuk-cookie-banner[hidden] {
display: none;
}
The implementation in GOV.UK Frontend was tested all the way back to IE8 as part of alphagov/govuk-frontend#2126.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks all, sounds like this needs some reworking!
1f0eb56
to
a27f690
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Lovely - thanks for fixing this.
(Just needs a changelog entry.)
It seems that IE10 does not support the hidden attribute. This is causing some issues with the cookie banner script: when the confirmation banner is visible (upon rejecting/accepting cookies), the cookie choice panel should disappear, which does not happen in IE10. This fixes the issue by using CSS to hide elements accordingly when the hidden attribute is present (as opposed to toggling display with JS). Additionally, switch from using property dot notation to set hidden to true/false, to using setAttribute because even though the former worked in all major modern browsers, IE10 seemed to ignore it. This is perhaps due to the distinction between properties and attributes.
a27f690
to
b17d981
Compare
It seems that IE10 does not support the
hidden
attribute.This is causing some issues with the cookie banner component: when the confirmation banner is visible (upon rejecting/accepting cookies), the cookie choice panel should disappear, which does not happen in <IE10.
This attempts to fix the issue by using CSS to hide elements accordingly when the
hidden
attribute is present (as opposed to togglingdisplay
with JS).Additionally, switch from using property dot notation to set hidden to true/false, to using
setAttribute
because although the former worked in other major browsers, IE10 seemed to ignore it (perhaps due to the distinction between properties and attributes).More details and a lovely visual of the bug in action on the original issue.