Content Filtering in iOS does not support CSS style changes

Browser Support Mobile Support
,
1

Hello everyone,

I am working on customizing my youtube feed page (removing thumbnail and adjust some margins).
However, I found that using :style does take effect on Brave on my iOS device (iPhone 16e).
Is this something we can fix from Brave?
Or could this be something from WebKit?

These filters:

m.youtube.com##ytm-video-with-context-renderer:style(margin: 0px !important)
m.youtube.com##ytm-video-with-context-renderer div.details:style(margin: 0px !important)

removes the margin around video entries in the home page.

On my brave on my android phone, this filter removes the margin around all the video entries.

android
android1080Ă—1784 266 KB

On my brave on my iOS phone, this filter does not have any effect.
ios
ios1170Ă—1973 179 KB

Note In the screenshot, I also removed the videos’ thumbnail with another filter (works on both devices).
m.youtube.com##a.media-item-thumbnail-container

How can this issue be reproduced?

  1. Add these filters:
    m.youtube.com##a.media-item-thumbnail-container
    m.youtube.com##ytm-video-with-context-renderer:style(margin: 0px !important)
    m.youtube.com##ytm-video-with-context-renderer div.details:style(margin: 0px !important)
    to (for iOS) All Settings > Shields & Privacy > Content Filtering > CUSTOM FILTERS
    (for Android) … > Settings > Brave Shields & privacy > Content Filtering > Create custom filters.
  2. browse youtube

Expected result:
(On android) video entries should not have margin.
(On iOS) video entries still have margin.

Brave Version( check About Brave):
(On android) 1.77.100
(On iOS) 1.77.99

Mobile Device details
(On android) Android 12
(On iOS) iOS 18.4

Additional Information:
To inspect web element in iOS please follow this guide https://stackoverflow.com/questions/76219707/how-to-access-ios-brave-browser-dev-tools

2

To clarify, :style (https://github.com/gorhill/ublock/wiki/static-filter-syntax#subjectstylearg) is used for changing the CSS style of the selected HTML element in the page.

3

Might be related: https://github.com/brave/adblock-rust/issues/326

4

@chanwutk,

In your “How can this issue be reproduced?”, step 1, please edit that portion in your Original Post - by using backtic characters embracing each filter.

Examples:

m.youtube.com##a.media-item-thumbnail-container

m.youtube.com##ytm-video-with-context-renderer:style(margin: 0px !important)

5

Edited as requested. Thank you for the suggestion :slight_smile:

1 Like