search

uBlockOrigin / uAssets

Resources for uBlock Origin, uMatrix: static filter lists, ready-to-use rulesets, etc.
GNU General Public License v3.0
3.96k stars 747 forks source link

Blocking a delayed modal popup executed via javascript - Blocking a delayed overflow: hidden CSS scrollbar execution #667

Closed yourduskquibbles closed 7 years ago

yourduskquibbles commented 7 years ago

Replace the bracketed [...] placeholders with your own information.

URL(s) where the issue occurs

https://www.change.org/p/dear-ncaa-create-a-policy-that-bans-violent-athletes?source_location=discover_feed

Describe the issue

To recreate this, you need to be in a mobile browser or fake a mobile browser by using uMatrix or similar tool to Spoof User-Agent to show as mobile.

Steps to reproduce on desktop

  1. Use uMatrix and spoof user-agent string to Mozilla/5.0 (Android 7.1.2; Mobile; rv:53.0) Gecko/53.0 Firefox/53.0
  2. Set your window width to 408px to simulate a mobile web view.
  3. Visit https://www.change.org/p/dear-ncaa-create-a-policy-that-bans-violent-athletes?source_location=discover_feed or any other change.org petition.
  4. Scroll down and leave the page page for around 30 seconds.
  5. Observe modal overlay will popup asking to sign the petition. Notice the vertical scroll bar is also removed when this modal is fired. (If you're in the browser console, you will see the html and body tags get updated with new CSS properties)
  6. Add the following custom filters to ublock to remove the modal overlay as well as restablish the scroll bar. change.org##.in.modal change.org##body:style(overflow: visible !important)
  7. Observe the modal is gone and the scroll bar has been brought back after adding those two filters.
  8. Now reload the page with your new filters added from above and scroll down and leave the page open for around 30 seconds.
  9. Notice that after the time delay, the site javascript fires off the 'in.modal' and changes the CSS properties to disable overflow. The problem is that the modal is now blocked but the scroll bar is gone because the change.org##body:style(overflow: visible !important) rule gets overwritten and there is no way to close the modal the proper way using the 'x' which would fire off the site javascript to return the vertical scroll bar and set overflow properties back to visible.

Steps to reproduce on Firefox for Android

  1. Follow steps 3-8 above.

I guess my question is: Is there anyway to delay a filter from executing for a certain amount of time or is there a better filter execution I could be performing that would prevent this from happening? Which is why I opened this issue here for help on the filter creation possibility.

Screenshot(s)

I can provide video of the issue if it is not understood my problem from above.

Versions

Settings

Notes

This doesn't happen if you only change your screen width to 408px, you need to also be sending a user-agent that is a mobile browser to recreate.

Thank you to anyone willing to take a look!

gorhill commented 7 years ago

Use

change.org##.in.modal
change.org##body:style(overflow: visible !important;)
change.org##html:style(overflow: visible !important;)

The overflow style is also applied to the html tag.

yourduskquibbles commented 7 years ago

Thanks, that seems to work! Before opening this issue I had tried both the ##body:style(overflow: visible !important;) and ##html:style(overflow: visible !important;)

filters independently but never together. I now know for next time.

Thank you!