Your submission was sent successfully! Close

You have successfully unsubscribed! Close

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

Supporting “I don’t care about cookies”

Anthony Dillon

on 19 February 2021

Tags: Design

This article is more than 3 years old.


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.

Talk to us today

Interested in running Ubuntu in your organisation?

Newsletter signup

Get the latest Ubuntu news and updates in your inbox.

By submitting this form, I confirm that I have read and agree to Canonical's Privacy Policy.

Related posts

Canonical’s recipe for High Performance Computing

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...

Web team – hack week 2023

Today, around 96% of software projects utilize open source in some way. The web team here at Canonical is passionate about Open source. We lead with an...

Vanilla 4.0 release

Last week we released a new major version of the Vanilla framework. Vanilla 4.0 introduces the elements of the new style used for a current rebranding of...