Skip to main content

Your submission was sent successfully! Close

Thank you for signing up for our newsletter!
In these regular emails you will find the latest updates from Canonical and upcoming events where you can meet our team.Close

Thank you for contacting our team. We will be in touch shortly.Close

  1. Blog
  2. Article

Anthony Dillon
on 19 February 2021

Supporting “I don’t care about cookies”


It all started one day when my boss turned to me and said, the legal team have said we need to ask a person before our websites can start using non-essential cookies. So we started the cookie-policy project which is written in vanilla JavaScript with accompanying styling and the back-end implemented via Google Tag Manager.

The cookie-policy project displays a modal to each first-time visitor to manage which cookies they would like to accept. We have rolled out successfully across over 30 of our sites.

Recently we received an issue that there was no way to scroll on our site if you were using a popular browser extension named I don’t care about cookies. The cookie policy script added a class to the body of the site to lock scrolling as it was expecting the cookie management modal to be present. The plugin has a range of selectors targeting known cookie notification elements and hides the cookie modal making it impossible for users to remove the scroll lock. 

How to support the extension

Here is a subset of the CSS injected into the site by the plugin. As you can see .cookie-policy is targeted and happens to be the container class used by our cookie-policy.

#stickyCookieBar, 
.cookiebar-bar:not(body):not(html), 
#sliding-popup, 
#cookie_bar_top, 
#cookielaw:not(.modal),
[ … ]
.cookie-policy:not(body):not(html),
[ … ]
#cookiebnr, 
#cookieWarning, {
    display: none !important;
    ...
}

There are a few body classes but they have been kept to a minimum for good reason.

This isn’t what we want to happen and we believe it’s important to respect the wishes of our users so we want to support this extension. Therefore we removed the scroll lock after the cookie management modal appeared as there was no way to identify if the modal was being hidden via this extension.

So if you have written a cookie policy widget for your site or application try and support the extension by using one of the supported selectors and also try and keep it self contained within that element to limit issues such as we expereinced.

Related posts


Julie Muzina
13 August 2024

Visual Testing: GitHub Actions Migration & Test Optimisation

Design Article

What is Visual Testing? Visual testing analyses the visual appearance of a user interface. Snapshots of pages are taken to create a “baseline”, or the current expectation of how each page should appear. Proposed changes are then compared against the baseline. Any snapshots that deviate from the baseline are flagged for review. For example ...


Ana Sereijo
19 April 2024

Let’s talk open design

Design Article

Why aren’t there more design contributions in open source? Help us find out! ...


Igor Ljubuncic
24 January 2024

Canonical’s recipe for High Performance Computing

HPC HPC

In essence, High Performance Computing (HPC) is quite simple. Speed and scale. In practice, the concept is quite complex and hard to achieve. It is not dissimilar to what happens when you go from a regular car to a supercar or a hypercar – the challenges and problems you encounter at 100 km/h are vastly ...