adamschwartz / chrome-tabs

Chrome-style tabs in HTML/CSS.

Home Page:http://adamschwartz.co/chrome-tabs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

chrome-tabs background color bleeding through individual tabs

Achilles1515 opened this issue · comments

untitled

In the screenshot above (using Chrome as browser), I set...

.chrome-tabs {
    background: red;
}

...to emphasize the problem, and you may need to zoom in/resize the browser to reproduce the issue.

I was able to remove the bleeding vertical line by removing the inline width="50%" attribute in the "chrome-tab-geometry-right/left" <svg> HTML elements (or change it to something greater than 50%, but I think these width and height attributes can be removed entirely - their width and height percentages are already being set in the CSS?).

Not too sure about the bottom line.

This happened with the previous look as well. It would be great to get this resolved!

I’m not able to reproduce this in the latest stable version of Chrome running on macOS.

image

What browser (+ version) / OS are you running? And by any chance are you zooming the page?

image

If I add enough tabs, the line appears. If I zoom in it also does appear but the pic above is 100% zoom.
Using Chrome 71.0.3578.98 (latest), Windows 10.

@stekyne Thanks so much for that.

Would you also be willing to share your devicePixelRatio? You can get this by typing devicePixelRatio (or window.devicePixelRatio) into the Chrome DevTools console. For me the value is 2, but I suspect for you it is 1.

image

This will further help me identify which cases I’ll need to fix. (Whether the issue is limited to Windows, systems with devicePixelRatios other than 2, etc.)

Thanks in advance for your help with this.

Yup, you are dead right. It was 1.

@stekyne Thanks again. I should be able to come up with a fix for this issue now.

1.25 devicePixelRatio for me. Windows 7, latest Chrome.

@Achilles1515 @stekyne I was unfortunately never able to reproduce the issue myself after testing on a few devices with different devicePixelRatios. However, I hope that I was still able to fix the issue blind with d6cb603. Please let me know if you still see the issue with the latest version.

Looks good, I can't seem to reproduce the issue now.

Also looks fixed from my end. Thanks!