New issue
Advanced search Search tips

Issue 610079 link

Starred by 9 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Bug



Sign in to add a comment

Many StackExchange sites appear with vertical lines

Reported by md...@lifeimage.com, May 7 2016

Issue description

UserAgent: 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
 
deluminate_a.png
471 KB View Download
deluminate_b.png
801 KB View Download
Oops, I have a couple of corrections to make:

What is the expected behavior?
The Deluminate extension inverts the black/white colors of websites, or optionally dims the brightness of websites.

What went wrong?
When Deluminate is enabled, some vertical thin white lines appear "over" the content of most (if not all) StackExchange websites. On my screen there are usually 4 of the white lines. The content of site is partially obscured by the white lines.
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.
stackexchange-rendering-no-bug.png
263 KB View Download
stackexchange-rendering-bug.png
240 KB View Download

Comment 3 by rob@robwu.nl, May 15 2016

Components: -Platform>Extensions Blink>Paint Blink>CSS>Filters
Labels: OS-Linux
Status: Untriaged (was: Unconfirmed)
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).
Labels: -Pri-2 Pri-3
Status: Available (was: Untriaged)
Cc: senorblanco@chromium.org
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.
repro.html
4.9 KB View Download
I should clarify that in the preceding comment "this page" refers to the landing page of stackoverflow.com
Labels: -OS-Linux -OS-Mac OS-All
Confirmed that the test page, with viewport 1788 × 1251, at least.

Comment 9 by suzyh@chromium.org, Apr 5 2017

Components: -Blink>CSS>Filters Blink>Compositing>Filters
Project Member

Comment 10 by sheriffbot@chromium.org, Apr 13 2018

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
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
Components: -Blink>Paint -Blink>Compositing>Filters Internals>Compositing
This issue is due to compositor tiling artifacts, it seems, so sending it over there.
Cc: pdr@chromium.org vmp...@chromium.org chrishtr@chromium.org
Status: Available (was: Untriaged)

Sign in to add a comment