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.
Rather than doing this in the JavaScript, would adding:
[hidden] {
display: none;
}to the CSS work?
There was a problem hiding this comment.
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.
According to caniuse hidden isn't supported by IE10? https://caniuse.com/hidden
There was a problem hiding this comment.
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.
thanks all, sounds like this needs some reworking!
danacotoran
force-pushed
the
cookie-banner-ie-10-bug
branch
from
1f0eb56
to
a27f690
Compare
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.
danacotoran
force-pushed
the
cookie-banner-ie-10-bug
branch
from
a27f690
to
b17d981
Compare
It seems that IE10 does not support the
hiddenattribute.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
hiddenattribute is present (as opposed to togglingdisplaywith JS).Additionally, switch from using property dot notation to set hidden to true/false, to using
setAttributebecause 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.