Noticing that there is no border between Edit and Edit source tab.
- Upstream bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=890421
Description
Description
Related Objects
Related Objects
Event Timeline
Comment Actions
This seems to be a Chromium rendering bug. We didn't do anything to these tabs that would cause this. I can't reproduce the issue in other browsers.
(I'm running Chromium 69. I don't know if this is the first buggy version.)
It seems to be related to the exact width of the tabs. I can't reproduce the problem in other languages, where tab labels are different.
A very similar issue seems to affect the old Preferences page (https://en.wikipedia.org/wiki/Special:Preferences?ooui=0) – note lack of border between "Watchlist" and "Search" tabs:
Comment Actions
Here's a fairly minimal test case if anyone fancies reporting this bug upstream: http://jsfiddle.net/146bnjgu/16/
div { float: left; height: 20px; background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAUCAIAAADDbMD2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAATSURBVBhXYyAFMDIyQlk4AAMDAAC2AAT6bDYOAAAAAElFTkSuQmCC) bottom right no-repeat; }
<div style="width:20px"></div> <div style="width:20.01px"></div> <div style="width:20.02px"></div> <div style="width:20.03px"></div> <div style="width:20.04px"></div> <div style="width:20.05px"></div> <div style="width:20.06px"></div> <div style="width:20.07px"></div> <div style="width:20.08px"></div> <div style="width:20.09px"></div> <div style="width:20.10px"></div> <div style="width:20.11px"></div> <div style="width:20.12px"></div> <div style="width:20.13px"></div> <div style="width:20.14px"></div> <div style="width:20.15px"></div> <div style="width:20.16px"></div> <div style="width:20.17px"></div> <div style="width:20.18px"></div> <div style="width:20.19px"></div> <div style="width:20.20px"></div> <div style="width:20.21px"></div> <div style="width:20.22px"></div> <div style="width:20.23px"></div> <div style="width:20.24px"></div> <div style="width:20.25px"></div> <div style="width:20.26px"></div> <div style="width:20.27px"></div> <div style="width:20.28px"></div> <div style="width:20.29px"></div> <div style="width:20.30px"></div> <div style="width:20.31px"></div> <div style="width:20.32px"></div> <div style="width:20.33px"></div> <div style="width:20.34px"></div> <div style="width:20.35px"></div> <div style="width:20.36px"></div> <div style="width:20.37px"></div> <div style="width:20.38px"></div> <div style="width:20.39px"></div> <div style="width:20.40px"></div> <div style="width:20.41px"></div> <div style="width:20.42px"></div> <div style="width:20.43px"></div> <div style="width:20.44px"></div> <div style="width:20.45px"></div> <div style="width:20.46px"></div> <div style="width:20.47px"></div> <div style="width:20.48px"></div> <div style="width:20.49px"></div> <div style="width:20.50px"></div> <div style="width:20.51px"></div> <div style="width:20.52px"></div> <div style="width:20.53px"></div> <div style="width:20.54px"></div> <div style="width:20.55px"></div> <div style="width:20.56px"></div> <div style="width:20.57px"></div> <div style="width:20.58px"></div> <div style="width:20.59px"></div> <div style="width:20.60px"></div> <div style="width:20.61px"></div> <div style="width:20.62px"></div> <div style="width:20.63px"></div> <div style="width:20.64px"></div> <div style="width:20.65px"></div> <div style="width:20.66px"></div> <div style="width:20.67px"></div> <div style="width:20.68px"></div> <div style="width:20.69px"></div> <div style="width:20.70px"></div> <div style="width:20.71px"></div> <div style="width:20.72px"></div> <div style="width:20.73px"></div> <div style="width:20.74px"></div> <div style="width:20.75px"></div> <div style="width:20.76px"></div> <div style="width:20.77px"></div> <div style="width:20.78px"></div> <div style="width:20.79px"></div> <div style="width:20.80px"></div> <div style="width:20.81px"></div> <div style="width:20.82px"></div> <div style="width:20.83px"></div> <div style="width:20.84px"></div> <div style="width:20.85px"></div> <div style="width:20.86px"></div> <div style="width:20.87px"></div> <div style="width:20.88px"></div> <div style="width:20.89px"></div> <div style="width:20.90px"></div> <div style="width:20.91px"></div> <div style="width:20.92px"></div> <div style="width:20.93px"></div> <div style="width:20.94px"></div> <div style="width:20.95px"></div> <div style="width:20.96px"></div> <div style="width:20.97px"></div> <div style="width:20.98px"></div> <div style="width:20.99px"></div> <div style="width:21px"></div>
And how different browsers render it:
| Chrome |  | (INCORRECT) |
| Firefox |  | (correct) |
| Edge |  | (correct) |
Comment Actions
Been seeing this for about a month or so in Chrome canary. I didn't think it was worth reporting as I expect Chrome to have rendering tests for this before doing a stable release. But, apparently not – and now it reached stable.
Let's report this upstream. I'll also reach out to devrel once linked here.
Comment Actions
Ha, I do think this is a bit blurry too, just not as strong as in your image examples. But there's no change in code between https://en.wikipedia.beta.wmflabs.org/wiki/User:RYasmeen_(WMF)/sandbox?action=edit and for example https://en.wikipedia.org/wiki/Front_end?action=edit
Also adding background-size: 21px 9px; doesn't change the aliasing on Beta. Anyways better moved to a different task than this one.
Comment Actions
That's broken and definitely looks like a browser bug to me. I think the background image is rendering at the correct size, but its position is offset by a fraction of a pixel.
Comment Actions
I filed https://bugs.chromium.org/p/chromium/issues/detail?id=890421. Looks like there are several recent issues reported regarding rendering of backgrounds, but none looked like the exact thing we're running into.
Comment Actions
I run Google Chrome 69.0.3497.92 on Ubuntu 18.04. The fiddle linked by @matmarex renders wrong, although I can see the tab border. When reloading and experimenting with it, I was able to "hide" it for a few of moments, but it re-appeared.
Comment Actions
Also post on https://bugs.chromium.org/p/chromium/issues/detail?id=463348 (Chromium issues affecting Wikipedia)
Comment Actions
The Chromium issue has supposedly been fixed and the fix will be included in Chromium 73 or 72: https://bugs.chromium.org/p/chromium/issues/detail?id=912423#c8
Comment Actions
This is definitely resolved. The Chromium issue is fixed and the fix was released. I'm using Chromium 73 right now and don't see the issue, and the testcase from T204766#4596218 also renders correctly:
