Supporting “I don’t care about cookies”

Anthony Dillon

on 19 February 2021

Tags: Design

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

Select topics you're
interested in

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

Related posts

Design and Web team summary – 12 April 2021

The web team at Canonical run two-week iterations building and maintaining all of Canonical websites and product web interfaces. Here are some of the...

Design and Web team summary – 29 March 2021

The web team at Canonical run two-week iterations building and maintaining all of Canonical websites and product web interfaces. Here are some of the...

Meet my co-worker, webbot

Like every team, the web team has a set of features that are super useful to automate. We use Hubot, a technology owned by GitHub to write very simple bot...