On websites with style elements like “display: grid !important”, the element eraser won’t work correctly. It adds “display: none” inline, not “display: none!important”, so the inline CSS has lower priority than the !important from the CSS. I noticed this on the header bar on ft.com but I expect any snippet will show this behaviour.
Here's a video showing the issue.
Here's an example html that shows the issue. If you use the Erase Element on the element, it won't work.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.test-element {
display: block !important;
background-color: red;
color: white;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div class="test-element">
This element has display: block !important.
</div>
</body>
</html>
I expect the element eraser to work on elements that have display: whatever !important
. Right now it does not do this.
Version 0.99.131.0.2-beta (WebKit 621.1.2.111.4) Build date Mar 11 2025 Mac 15.3.2 (Build 24D2082)
Sequoia (15)