Many StackExchange sites appear with vertical lines
Reported by
md...@lifeimage.com,
May 7 2016
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36 Steps to reproduce the problem: 1. Install Deluminate extension. 2. Visit StackOverflow or a StackExchange site. 3. Turn on Deluminate to any setting except "Normal". What is the expected behavior? Some vertical white lines appear to be "over" the content of the website. On my screen there are usually 4 of the white lines. What went wrong? The content of the StackOverflow/StackExchange site is partially obscured by the white lines. WebStore page: https://chrome.google.com/webstore/detail/deluminate/iebboopaeangfpceklajfohhbpkkfiaa?hl=en-US Did this work before? Yes For the last two months, I noticed only AskUbuntu.com was affected by this (I don't recall what Chrome version that was). Only this week did the issue start to affect all other StackExchange sites' rendering. Chrome version: 50.0.2661.94 Channel: stable OS Version: OS X 10.11.3 Flash Version: Shockwave Flash 21.0 r0
,
May 7 2016
This can be reproduced without installing the Deluminate extension also, but it is not reproducible on ALL Stack Exchange sites. The Cryptography one in the screenshots (crypto.stackexchange.com) is notably one that demonstrates the behavior. The Deluminate extension adds a CSS filter to the document, and that's all you need to do to see the problem. On Macs, I've only been able to reproduce this rendering issue on a high DPI "retina" display. Visit the crypto.stackexchange.com page and add the following attribute to the HTML tag: `style="-webkit-filter: invert(1);"` to see it. On Windows, I have seen a slightly different rendering issue (see attached screenshot) that I believe is similar enough to be related. It's as though there are still vertical lines, but instead of being rendered in white, they are rendered as a copy of the pixel to the immediate left. It's most noticeable in text, where some characters are rendered slightly too wide. I have been able to reproduce this rendering issue on the same site (crypto.stackexchange.com) WITHOUT a high DPI display by slightly modifying the added style attribute: `style="-webkit-filter: invert(1); -webkit-transform: translateZ(0);"`. Note the addition of the `-webkit-transform`, which is believed to trigger a hardware accelerated rendering path in Blink. The attached screenshot uses this addition to the HTML tag. Compare the first "c" in the "StackExchange" logo at the top and the "c" in the "Encryption" tag between these two screenshots on Windows. Both are inverted, but one has added the `translateZ(0)` CSS function. I believe both issues are related. There seem to be "seams" in Blink's rendering with these CSS styles. I cannot vouch for what version(s) introduced these problems.
,
May 15 2016
This is a non-regression, I can reproduce the problem as follows (in all versions between and including Chromium 35 and 50 on Linux): 1. Start Chrome with --disable-gpu 2. Visit https://crypto.stackexchange.com/ 3. Run the following snippet from the omnibox (note: if you copy-paste, type "javscript:" in front of it because Chrome strips the JS prefix. javscript:document.documentElement.style.cssText='-webkit-filter:invert(1);-webkit-transform:translateZ(0);';void(0); 4. Resize the window (width) until the vertical line appears. Zooming in/out also moves the line (but resizing is easier). If I look at chrome://gpu, then "Graphics Feature Status" is set to "Software only, hardware acceleration unavailable" for all but two (MRT and WebGL are both Unavailable).
,
May 19 2016
,
May 19 2016
,
Jan 4 2017
I have tracked this down to a combination of styles on this page. Undoing any of these seems to remove the effect for me: * "text-indent: -999999em" on "#hlogo a" * "display: block" on "#hlogo a" * "position: fixed" on "#notify-container" * Enough content to require a scroll bar. This has been enough for me to produce a minimal HTML file that demonstrates the issue. On my system, there is a white "seam" along the left side of the screen. Others report white lines elsewhere as well.
,
Jan 4 2017
I should clarify that in the preceding comment "this page" refers to the landing page of stackoverflow.com
,
Jan 4 2017
Confirmed that the test page, with viewport 1788 × 1251, at least.
,
Apr 5 2017
,
Apr 13 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 13 2018
This issue is due to compositor tiling artifacts, it seems, so sending it over there.
,
Apr 20 2018
|
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by md...@lifeimage.com
, May 7 2016