yourduskquibbles / webannoyances

Fix and remove annoying web elements such as sticky headers, floating boxes, floating videos, dickbars, social share bars and other distracting elements.
Creative Commons Attribution Share Alike 4.0 International
1.29k stars 48 forks source link

9to5Google\Mac websites - injected floating filter causes mobile view to have mis-aligned styling #494

Open vonDubenshire opened 1 year ago

vonDubenshire commented 1 year ago

URL(s) where the issue occurs

https://www.9to5google.com

Describe the issue

9to5google.com and related websites are specifically called out in the WebAnnoyances Floating filter pulled in at the beginning of loading Web Annoyances.

Causes mis-alignment of icons at the top of the floating nav.

Screenshot(s)

https://i.vgy.me/etjRe7.png

Versions

Notes

I have found the issue is related to an "IMPORTANT" override in the CSS.

The FLOATING FILTERS include is responsible. See here:

9to5google.com,9to5mac.com,9to5toys.com,dronedj.com,electrek.co,spaceexplored.com##.header-icon-links a:style(height: 70px !important; line-height: 70px !important;)

https://raw.githubusercontent.com/yourduskquibbles/webannoyances/master/filters/floating_filters.txt#:~:text=9to5google.com%2C9to5mac.com%2C9to5toys.com%2Cdronedj.com%2Celectrek.co%2Cspaceexplored.com%23%23.header%2Dicon%2Dlinks%20a%3Astyle(height%3A%2070px%20!important%3B%20line%2Dheight%3A%2070px%20!important%3B)

I have added a screenshot here:

https://i.vgy.me/Np0qPS.png

Removing the IMPORTANT addition to the CSS, or adding !important to the 40px original styling, fixes the issue.

This may be the result of when 9to5 re-adjusted their header and navigation 6+ months ago.