ABP for Chrome messes up the page on high DPI

[oleksandr]

Environment

Chrome 40.0.2214.91 m, Windows 8.1 x64, ABP 1.8.10, EasyList filterlist. Hight resolution display.

How to reproduce

On modern high resolution displays that are small enough it is a common practice to set a rather high DPI. This breaks ABP's element hiding, it seems.

1. Set the "Size of all items" in "Make text and other items larger or smaller" to be "Extra Large - 200%". Go to Chrome and set the Font Size to Large. Restart to apply.
2. Go to ​http://techcrunch.com/2015/01/22/why-the-apple-watch-doesnt-need-more-than-a-few-hours-of-active-use-time/ or any other article on TechCrunch
3. Observe the page messed up as on the attached Image1.JPG
4. Set the "Size of all items" to "Smaller - 100%", restart to apply.
5. Observe the page now works as expected.

Observed behaviour

The page is being mostly hidden behind the white squares. As shown on Image1.JPG.

Expected behaviour

Only ads should be hidden, the content should be readable.

[sebastian]

This option isn't available in my Windows 8.1 VM, so I can't try to reproduce it. I suppose this is a Chrome bug, triggered by creating a shadow root.

1. Does that happen on all or only on some websites?
2. Can you reproduce the issue with the latest ​beta and ​dev version of Chrome?
3. Can you reproduce the issue without Adblock Plus, when running following code in the JavaScript console?

var root = document.documentElement.createShadowRoot();
root.appendChild(document.createElement("shadow"));

[sebastian]

Finally, I were able to set that option on our test machine running Windows 8.1 64-bit and Chrome 40.0.2214.93. However, I couldn't reproduce the issue there.

[oleksandr]

1. It happens on some websites only. Always happens on the techcrunch link posted here
2. I can reproduce it in Chrome, Chromium. Can't reproduce it in Opera. I can't reproduce it on our test infrustructure, but I think it is because of the RDP's DPI limitations. In Chrome dev version the issue is still present, but slightly better. If I scroll up and down the page reappears, otherwise it's the same.
3. With Adblock Plus, if I run that code the issue goes away. Without Adblock Plus that code has no effect.

It happens only if I set the text size in Chrome to Large. Otherwise everything is fine. I also have text size in windows set to 200%.

[sebastian]

I tried using the web console (instead RDP). But I still can't reproduce it, regardless of the text size. I also tried both Metro and Desktop mode. Neither can I reproduce it under Linux when changing the text size.

Can you reproduce the same behavior with testext.zip​? You have to unzip the file, and load it as unpacked extension in developer mode. Also make sure that Adblock Plus is disabled.

[oleksandr]

No, the testext.zip​ does not reproduce the issue

[sebastian]

So far this issue only occurs in following scenario:

• on techcrunch articles (and sometimes on a few other pages)
• with Windows 8(.1)
• using a high resolution display (something like full HD at least)
• when "Size of all items" in Windows is set to at least 200%
• when the font size in Chrome is set to "Large"

We also know:

• It's not (solely) triggered by creating a shadow root.
• In the current Chrome dev version the behavior got already a little better.

Given the very specific conditions to reproduce, I set the issue to P4 for now. Also without a setup matching those requirements, I can't do anything anyway.

[philll]

As you can see in the image​ I just attached, this looks fine for me on Windows 8.0 64 bit.

[sebastian]

Possibly it only occurs on Win 8.1, or there is another factor involved we haven't considered yet. So far only Oleksandr could reproduce the issue locally on his PC, and only with the above configuration.

[oleksandr]

After some more investigations it appears that the problem is not the CSS injection, but rather in blocking. With CSS injection disabled the problem still persists. But not blocking ads from ads.tw.adsonar.com (:ads. filter) resolves the problem.

[sebastian]

The URL of that request looks like:

http://ads.tw.adsonar.com/adserving/getAdsAPI.jsp?callback=aslHandleAds3246…s-of-active-use-time%252F&version=3&format=json&test=false&_=1424692894638

And the response looks like:

aslHandleAds409700({"response":{"statusCode":"200","statusText":"Ok","searchinfo":{"key":"techcrunch.com","Type":"URL","domain":{"id":3110767}},"data":{"numPlacements":1,"placement":[{"id":1584487,"template":{"id":36663243},"numResults":3,"listing":[{"adFormat":2,"clickToCall":"false","type":"Force","image":  {"width":125,"height":125,"src":"s.aolcdn.com/os/SponsoredListings//AdGallery/27899134/125x125/4927092.jpeg"},"targetUrl":"http://redir.adsonar.com/process/redir.jsp?p=rwBUfP7tgbU5g-s5kjE8GL6F95DiqmrFJMv/rOZRi203OttC0pv1CK6YL-uSfwg-GlfwRJmF2uehZBiDRTG-225B-inJKSqzrLjYvySPF0s8ixK34Y4ILq63-IBlIai1Sfs0537mlG21W02VrCGHIKbhfa39z4yxnS6Sek8fvwmsFoR17YuoXvlwGnimrvScBjSKZ4YOY-HTm7ZmkNYafLw/w4grzHy316o/dJk-edf0UaGUe0jaY4RgZkOWeHDAEmfpYq4dTw3X8SdAFODozu1n57kZij0EU0JsH4MrBO1Vhy6hIU/xxwdGFIcSskmZv5JIm3cf39GSh8g0A5FZ16ox93BKEgjkgvos5aPK1DotMkLxKRNGOsSUPVRbYfHsd3p6hTPxJwlcNpVSk6Mq9vTYpqwOUGh/pU8M4YWlZ2TSzByTs0ddBMhTPWZ8vkqj18JBfhHbK6FBmNDms5Oq6uA8RWdpW-6iqZDbN8yCjxfO457eQcTyelAnrS9oUfGlyi4R204/iCEV5jGRzSxgocVhWVCppGGEw8twS1TRaK8pfU5-rNbSJOP4Fs3fycN10FumkKdFmfGUdPM5/4Bhk/wD6v0n4dThqCVraGlLDT483yhynNcntayUJq4B7hLwUZUEXqwSZJfs68hMaiIoa/ykmxN2lJMzz5p3nDJL8EdFSv1ug6uJSOAhdcNKPRrwAk0Rm9R9e0G67UDvKNRA=="},{"adFormat":2,"clickToCall":"false","type":"Force","image":  {"width":125,"height":125,"src":"s.aolcdn.com/os/SponsoredListings//AdGallery/27861361/125x125/4962098.png"},"targetUrl":"http://redir.adsonar.com/process/redir.jsp?p=rwBUfP7tgbWpw6sNdpTt2fpVR1EQCMg2UBg/LAOh79hzPpmEYIhVah7IC2uivwie21I1QZgw/oIkRwuBkhSoLksF2mnJXE-nmPkoG2D6t0hOubOkIftJLgqTfNUzlE3wHH/3wOkwQQ/A3rnFvJUDdYP0LPk5Gmo0jswBua-8Py1NR1Tw6J6MWi1W7a/2rIWvhjZ7wgKbhjf1DGZk4eTrbx2fQ8j-XIp3l/yvZLluGdDFZxJSuIqIcXTD0qeCLcAVFhOtwBwOrHzw4Tcgh4Lv2AjRUpwcLr3StHWLCpVPcSlwc45hcUkGkPEjskI2ELsOr5A5qEYdb3CWw40UkweOwEziNsPIwspQx4hfp7XuMtkeUHBEz9bT/scjqrRedzNYw386A5VwkIlZNpZBJYY8IpZ7xKovI8kfoKs4pEZnoUcSDz4hAMF4BMoBvgdKm09GsqKx-QaMzTWXfKVQlKKbWBA8JxYpS-hFaKFpx8yAPgbe85uto0cB2ZGUL/-q5HRmTbmR2T8MuTIV4uWkDewWRoKn/CCqpzN0pe6TLMM3C26a78uYeUZU48Qeg-tNawRjNX11cqVDujAn9/JP2qPTsc7TCRxypLAXj0Ra2plKHp8Zy70336VUVwxH5mokC3HR4RQ3nW9jREN83gxYSYOY6s9nWPNmtcYDWL0mrYC78TW0WniLBmtYmKaQxUJ5/tmRgrgErgJfWZKL7uOovyLQoooIzVUfd8eP55DlsJ6MJXILSFuD4IdwHAM42lO9yupZpbE3zaib03yK0oBnz3VWSMigcNaw4XuLx3tROIHZwHXbdRSmZnYe0si9CKPXjp6P/Lh31wk6aibgQoiHQXVdzXABlQS-CUzXbdVa2qASi-8znG6eU="},{"adFormat":2,"clickToCall":"false","type":"Force","image":  {"width":125,"height":125,"src":"s.aolcdn.com/os/SponsoredListings//AdGallery/27861361/125x125/4962099.png"},"targetUrl":"http://redir.adsonar.com/process/redir.jsp?p=rwBUfP7tgbWpw6sNdpTt2fpVR1EQCMg2UBg/LAOh79hzPpmEYIhVah7IC2uivwie21I1QZgwzzPVFxolU-SIPgqga7lp3K637Tgsu3FplYmPGcK0RH/YWl-jbUYQtM3gzb5ywCkANdtQ7swVzTViFcOgCckoiUn0rg3QqS9cqhi9pyTgaJ-cSn-nXS7Fb0YvxwdOIsNqYMZFjVWnIxTKHnz-UhgrzGonl/z/dNkY2GBEVNGReKpJoOQWQjeyLbAFdiN7oayPn78zMYfwV1d/GJgRIuxsbqsjBPS4yVYvMPjgph7RYTkWsFEjEgJgwQuPnFP6mbZsv6UGU70kU6f-sHozhkL7AQgxBljecrTv9Diu0UOHDLaSL4KzXGKOYfWI4298pRP2Jj-f9ybAFkX-4vYKIb6-M6mvEbtJFJbTxZfSLB-RgfK7xypRb5OaWy8Xc2IAiPa8jLRnXOPRJCOom9Od95f8Tcn16ZKqBA3w7peLc11ME8YyGlMkTi4edIK3/TiiGvw9WOOhcgWUHfrn9gOUP-Iad6IhJWgynEIEyKw6y2toeTD1U0UtQCnsvlSjNUukwiRwefKWRkbfPGJjMP0QyvzydXRHaZXqW6qJ3C6c200hXhXVZM-EVu80TRBhYCf0Xh/zEdbMrt2pKiIoa/ykm1PWIGaV6Q2nnkN5QXW1n2grZntYyLAhdcNKPRrRp/j0GGPv2KFILabIX3KQ4vp-XOWeRARMB8Bgpr88pEHIi7vTwBah7MJsSqPrS1rYlnL1HNiuZ-2asjDW3wTmmHzEoBaTwMsK9LiT-SAI1fTas/UW50XdESjtiUISv59JHQj25Mr5inaQgq2GQLO8ffEyVsffqBx3vYDPatDDeoySLO-g=="}]}]}}})

@Arthur: Any way to work around that issue in EasyList while still blocking those ads?

[arthur]

@Ollie
Does this exception rule fix it for you? I'm also not able to reproduce it. On which other pages does that happen?

@@||ads.tw.adsonar.com/adserving/getAdsAPI.jsp?callback=aslHandleAds*&c=aslHandleAds*&key=$script

[oleksandr]

Yes, the issue on TechCrunch is gone with that exception rule. I don't think it's a solution to a problem though. It's just treating the symptoms.

[sebastian]

Well, it seems to be a browser bug caused by blocking that script. So not blocking it seems like a reasonable workaround, if it doesn't unblock some ads or cause other issues.

It would be great if we could track down the actual bug though, to have it fixed in Chrome. But that's not an easy task. And given how difficult it is to reproduce probably not worth spending any more time on it.

[arthur]

Ok, this should do it: ​https://hg.adblockplus.org/easylist/rev/0f61e52e8e5a

[oleksandr]

The issue is gone in the latest builds of Chrome and Chromium.

[arthur]

If you mean the stable version of Chrome, the exception rule can be removed. Is that the case?