Webannoyances: soundcloud.com

[RedDragonWebDesign]

soundcloud.com##.m-hideHeader > #app:style(padding-top: 46px !important;)

This filter and possibly some others are causing the http://www.soundcloud.com/ homepage to not render well. The topbar with the login button is covered up by some elements. Chrome, 1080p.

[yourduskquibbles]

@RedDragonWebDesign I think if I update all filters to include a check for a specific class on the body it should work.

Can you test adding the following filters to your personal filters?

soundcloud.com#@#.g-z-index-header.app__header, .header, .sc-browsers-enable-gpu.l-fixed.searchTitle:style(position: relative !important; top: 0 !important;)
soundcloud.com#@#.l-fixed-top-one-column > .l-top, .l-fixed.streamSidebar:style(position: static !important;)
soundcloud.com#@#.l-fixed-top-one-column:style(padding-top: 0 !important;)
soundcloud.com#@#.m-hideHeader > #app > .m-visible.g-z-index-control-bar.playControls:style(position: absolute !important; top: 0 !important; margin-top: 0 !important; margin-bottom: 46px !important;)
soundcloud.com#@#.m-hideHeader > #app:style(padding-top: 46px !important;)
soundcloud.com#@#.m-visible.g-z-index-control-bar.playControls:style(position: absolute !important; top: 0 !important; margin-top: 46px !important; margin-bottom: 46px !important;)
soundcloud.com#@#.playControls:style(position: absolute !important; top: 0px !important; bottom: unset !important; margin: 46px 0 46px 0 !important; visibility: visible !important;)
soundcloud.com#@#.playControls__inner:style(transform: translateY(0) !important;)
soundcloud.com#@#.playControls__queue:style(top: 52px !important; bottom: unset !important;)
soundcloud.com#@#.queue:style(box-shadow: 0 0 10px rgba(0,0,0,1) !important;)
soundcloud.com#@#.volume__sliderBackground, .volume__sliderProgress:style(transition: none !important;)
soundcloud.com#@#.volume__sliderHandle, .volume__sliderWrapper:style(position: relative !important; transition: none !important;)
soundcloud.com#@#.volume__sliderWrapper::after:style(top: 0px !important; left: 21px !important; bottom: unset !important; transform: rotate(135deg) !important;)
soundcloud.com#@#.volume__sliderWrapper::before:style(top: -1px !important; left: 23px !important; bottom: unset !important; transform: rotate(135deg) !important;)
soundcloud.com#@#.volume__sliderWrapper:style(bottom: 6px !important;)


soundcloud.com##body:not(.m-hideHeader) .g-z-index-header.app__header, .header, .sc-browsers-enable-gpu.l-fixed.searchTitle:style(position: relative !important; top: 0 !important;)
soundcloud.com##body:not(.m-hideHeader) .l-fixed-top-one-column > .l-top, .l-fixed.streamSidebar:style(position: static !important;)
soundcloud.com##body:not(.m-hideHeader) .l-fixed-top-one-column:style(padding-top: 0 !important;)
soundcloud.com##body:not(.m-hideHeader) .m-hideHeader > #app > .m-visible.g-z-index-control-bar.playControls:style(position: absolute !important; top: 0 !important; margin-top: 0 !important; margin-bottom: 46px !important;)
soundcloud.com##body:not(.m-hideHeader) .m-hideHeader > #app:style(padding-top: 46px !important;)
soundcloud.com##body:not(.m-hideHeader) .m-visible.g-z-index-control-bar.playControls:style(position: absolute !important; top: 0 !important; margin-top: 46px !important; margin-bottom: 46px !important;)
soundcloud.com##body:not(.m-hideHeader) .playControls:style(position: absolute !important; top: 0px !important; bottom: unset !important; margin: 46px 0 46px 0 !important; visibility: visible !important;)
soundcloud.com##body:not(.m-hideHeader) .playControls__inner:style(transform: translateY(0) !important;)
soundcloud.com##body:not(.m-hideHeader) .playControls__queue:style(top: 52px !important; bottom: unset !important;)
soundcloud.com##body:not(.m-hideHeader) .queue:style(box-shadow: 0 0 10px rgba(0,0,0,1) !important;)
soundcloud.com##body:not(.m-hideHeader) .volume__sliderBackground, .volume__sliderProgress:style(transition: none !important;)
soundcloud.com##body:not(.m-hideHeader) .volume__sliderHandle, .volume__sliderWrapper:style(position: relative !important; transition: none !important;)
soundcloud.com##body:not(.m-hideHeader) .volume__sliderWrapper::after:style(top: 0px !important; left: 21px !important; bottom: unset !important; transform: rotate(135deg) !important;)
soundcloud.com##body:not(.m-hideHeader) .volume__sliderWrapper::before:style(top: -1px !important; left: 23px !important; bottom: unset !important; transform: rotate(135deg) !important;)
soundcloud.com##body:not(.m-hideHeader) .volume__sliderWrapper:style(bottom: 6px !important;)

Tested on the following example links (from other soundcloud.com issue reports (#104, #141, #223)):

https://soundcloud.com/
https://soundcloud.com/polo-g/polo-g-feat-lil-tjay-pop-out
https://soundcloud.com/wombcorps/rip-fotze-response-to-breakforce-one-baby-demo-viju-send-for-amen-tal-jungle-syndicate/recommended

[RedDragonWebDesign]

Tested and working great on my end.

Good to know about :not() too. Maybe I can fix these on my own in the future :)

[yourduskquibbles]

@RedDragonWebDesign Thanks for confirming, will push these to now.

and :not() is very helpful when a page has selectors that are only present on certain types of pages i.e. home page but not article pages. It's definitely a good tool to remember that you have in the arsenal 😏