Collapse images with blocked content

[ghost]

I am on Windows and this problem applies to to all builds, from nightly to stable. I use Nightly as my main browser (Nightly v1.24.26 as of today), but I also test other builds to confirm the same problem happens in all builds.

The problem is simple: when you add a custom Network Filter rule that blocks an image in brave://adblock/, for example something extreme that will block all images everywhere like:

||*^$image

the cosmetic filtering that should apply to them doesn’t work properly because some blocked images leave a broken image icon leftover, and other images don't. it is a hit and miss because it doesn't happen all the time but it happens often to notice it.

Examples where you can clearly see the problem:

https://www.paladins.com/news/season-4-calamity-update-notes which has a mix of PNG, JPG and GIF and you will clearly and quickly see many images get the broken leftover and others don't, it is like a mix of problems there.

You can also test it in https://www.twitch.tv/directory where you will see game cover images (JPG) get blocked 'correctly' and don't display the broken icon, the ones that do display the issue are Recommended Channel avatars on the sidebar which are png, and the ones in 'Games, IRL, Music and Esports' section are SVG and get the problem as well.

Now if you go to a game like https://www.twitch.tv/directory/game/Retro now all images I think get the same problem, the channel thumbnails are jpg, and the channel avatars are png. So everything gets messed up in here regardless of the format.

It's been like this for months and months so while not a big problem I hope this gets fixed eventually, while not critical it is still a bug and doesn't look good since it is not doing the job it should or it is supposed to do, it happens everywhere but I tried to find the extreme case to really show and test it.

Thanks and have a good day.

[antonok-edm]

Thanks for the report @HGhostRevisionist88! I'm surprised that I've never seen this happening before.

I briefly looked into what uBlock Origin does in the same situation, and it appears it adds a randomized attribute to any blocked img elements on the page and injects a display: none !important rule that applies to any element with that attribute.

That appears to be a similar technique as the one I investigated in #14825, which applies to collapsing iframes. Hopefully it's possible to get both solved together 😄

[ghost]

@antonok-edm I have seen this problem often even without a custom filter but I always forget to bookmark in case I need a way to show the problem, but but today I accidentally found this website: https://www.telered.com.ar/

On top you will see the svg twitter icon is blocked by some internal Brave rule or something because on both aggressive and standard shields it has the problem and it displays fine when you turn the shields off. And just like that it is a similar case in other websites.

Of course this problem was not always present, it started to happen some months ago, because it used to work so good that I replaced FFZ extension and used brave to hide Twitch chat badges by these network filter rule ||static-cdn.jtvnw.net/badges/v1/*$domain=twitch.tv
and then add the exemption rule for the ones I wanted to see like mod and vip and streamer.
@@||static-cdn.jtvnw.net/badges/v1/b817aba4-fad8-49e2-b88a-7cc744dfa6ec/1$domain=twitch.tv
@@||static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/1$domain=twitch.tv
@@||static-cdn.jtvnw.net/badges/v1/5527c58c-fb7d-422d-b71b-f309dcb85cc1/1$domain=twitch.tv

But one day the others: subscribers and twitch prime etc etc started to display the broken icon image and I couldn't use that anymore unless I added a cosmetic filter to hide each of the broken image badges.

So let's hope your technique is able to fix things again 👌

BTW searching around I found a similar issue being reported but it was for android #14090 it has some more websites where you can see the problem and just like the website I found today it is the social media icon not displayed correctly when shields are up.

[stephendonner]

Verified PASSED using the testplan in brave/brave-core#9144 with

Brave	1.28.20 Chromium: 91.0.4472.114 (Official Build) nightly (x86_64)
Revision	4bb19460e8d88c3446b360b0df8fd991fee49c0b-refs/branch-heads/4472@{#1496}
OS	macOS Version 11.4 (Build 20F71)

Steps:

1. loaded https://www.twitch.tv/directory and saw thumbnails loading correctly
2. added ||*^$image,domain=twitch.tv to the Custom Filters section in brave://adblock
3. reloaded the Twitch page
4. confirmed profile and video-thumbnail images are missing from the page, with no "broken image" placeholders appearing
5. via brave://flags, set #brave-adblock-collapse-blocked-elements to Disabled, and restarted Brave
6. confirmed on Twitch that the broken images have "broken image" placeholders

step 1	step 2	steps 3 & 4	steps 5 & 6

---

Verification passed on

Brave	1.28.92 Chromium: 92.0.4515.107 (Official Build) beta (64-bit)
Revision	87a818b10553a07434ea9e2b6dccf3cbe7895134-refs/branch-heads/4515@{#1634}
OS	Ubuntu 18.04 LTS

Verified test plan from brave/brave-core#9144

---

Verification passed on

Brave | 1.28.92 Chromium: 92.0.4515.107 (Official Build) beta (64-bit)
-- | --
Revision | 87a818b10553a07434ea9e2b6dccf3cbe7895134-refs/branch-heads/4515@{#1634}
OS | Windows 10 OS Version 2004 (Build 19041.1110)

Verified test plan from brave/brave-core#9144

[srirambv]

Verification passed on Oppo R5 with Android 11 running 1.28.99 x64 Beta build

• Verified steps from Collapse HTML elements with blocked image/iframe requests brave-core#9144
• Verified no broken images are shown when #brave-adblock-collapse-blocked-elements is enabled. Confirmed with @antonok-edm

---

Verification passed on Samsung Tab A with Android 10 running 1.28.99 x64 Beta build

• Verified steps from Collapse HTML elements with blocked image/iframe requests brave-core#9144
• Verified no broken images are shown when #brave-adblock-collapse-blocked-elements is enabled. Confirmed with @antonok-edm