2
  • Erase Element doesn't work on elements with display:block !important

  • BugsDesktopDone

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)

    I would have thought this was a bug 🙂 Since the Erase Element feature doesn't seem to handle this correctly.

    14 days later

    @csl_ thank you for taking the time to compile detailed report. That's pretty much appreciated ans speeds up the process. Cheers!

    21 days later

    Thanks, works great in the new update!

      No one is typing