Page MenuHomePhabricator

Star in tab bar disappears after adding page to watchlist in Chrome
Closed, ResolvedPublic2 Estimated Story Points

Description

Hello. There is a regression in this week train, maybe library late load. From the moment of yesterday deployment there are some weird things with css.
I'm on Lollipop OS (built-in browser) in Vector in hewiki. Some more users see this too, on Chrome, Windows 10. Others do not.

  1. Open some non watched (watched) page.
  2. Click on watchlist empty (blue) star

Expected result:

  • The page is added to (removed from) your watchlist. The star becomes blue (empty).

Actual result:

  • The page is added to (removed from) your watchlist. The star completely disappears.
  • The star is shown again after resizing the browser window.

The problem remains in safemode.
The problem started on Tuesday evening on group0, Wednesday evening on group1, Thursday evening on group2.

Looks like something was broken, but not all were affected. My guess, from the stories of other users, that some collapsing library is loaded too late, but I'm not sure that this is the problem indeed.

T196610.jpg (855×1 px, 279 KB)

Developer notes

This is likely a CSS issue/glitch. There are no errors in the console when this happens and HTTP requests are working as expected. I can't seem to replicate the issue in Firefox. Appears to be Chrome only.

I was able to replicate the issue both locally and in production. When the watch star is not visible, it seems toggling the height, float or padding-top will restore it.

Via git bisect I managed to identify Ia2e2d623b19fba2566db36b9800102d52130af6b as the culprit. This changes font-size and padding values. The watchstar code looks quite brittle if it can break with such a change.

Removing overflow: hidden or the rotation seems to make the issue go away so likely related to those properties. -webkit-backface-visibility: hidden; doesn't help here.

	#ca-unwatch.icon a,
	#ca-watch.icon a {
		margin: 0;
		padding: 0;
		display: block;
		width: 28px;
		/* This hides the text but shows the background image */
		padding-top: 3.1em;
		height: 0;
		overflow: hidden;
		background-position: 5px 60%;
		background-repeat: no-repeat;
	}

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Well, the problem still exists.

Another user saw

JQMIGRATE: Migrate is installed with logging active

And now the problem is on the last group too...

By the way, on mobiles and tablets you do not need to reload the page. Just change the screen orientation, for example from portrait to landscape.

Let's please move "collapsing a table makes it disappear" to a separate task if that still happens. One problem per task.

Aklapper renamed this task from Star in tab bar disappears after adding page to watchlist; collapsing a table makes it disappear to Star in tab bar disappears after adding page to watchlist.Jun 11 2018, 2:26 PM
Aklapper updated the task description. (Show Details)

Let's please move "collapsing a table makes it disappear" to a separate task if that still happens. One problem per task.

As you wish. But I'm pretty sure it's the same problem.

@IKhitron: If you have clear steps and links to reproduce the table problem, please put them into a separate task. Things in this task are already noisy enough... :)
As long as the outcomes are totally different it does not matter if it's the same problem or not, and makes it only way harder to understand which of those two problem outcomes is discussed in which comment in this task. If the two problems turn out to happen because of the same underlying code change then the two tasks can still get merged.

Very well. Where is the second task you filed?

I did, so I asked , where is the task you want me put these steps?

I could finally reproduce the "star in tab bar" problem on https://de.wikipedia.org/wiki/Wikipedia:Technik/Werkstatt?debug=true in Chromium 66. (Cannot remember if I tried a few days ago in Chromium but if I tried then I was still on Chromium 65 at that time.)
Only HTTP 200 and HTTP 304 shown in the "network" tab. Gadgets and beta features seem to not be involved either (disabled all of them).

Looking at https://phabricator.wikimedia.org/source/Vector/history/master/ I see two recent changes but none seem related.

T196610.jpg (855×1 px, 279 KB)

Both SVG background images are displayed as expected when explicitly opening them.

I start to wonder if this is a regression in recent Chrome/Chromium and not a MediaWiki bug.

@IKhitron: Please create a separate task following https://mediawiki.org/wiki/How_to_report_a_bug (steps to reproduce; expected outcome; actual outcome). Thanks.

Please create a separate task

That's what you mean. But I'm not sure it's possible. It has not enough "meat" for separate task. For me, it just one more symptom for this task issue, to help the developers to understand the problem easier.

I start to wonder if this is a regression in recent Chrome/Chromium and not a MediaWiki bug.

Reminding you, it's not just there. And I did not updated my browser for sure. It's something from the deployment, started on Tue, more wikis on Wed, the rest on Thu.

On Windows 10 Chrome, the star reappears when the window is resized.

Please create a separate task

That's what you mean. But I'm not sure it's possible. It has not enough "meat" for separate task.

Doesn't matter. A task is for tracking a problem. If noone can provide enough "meat" the task will simply get closed at some point as not reproducible.

Aklapper renamed this task from Star in tab bar disappears after adding page to watchlist to Star in tab bar disappears after adding page to watchlist in Chrome.Jun 11 2018, 3:40 PM
Aklapper updated the task description. (Show Details)

Done.
@Aklapper, why do you changed the name to Chrome? As I said many times it happens in many browsers, and I found it in different browser.
And why did you removed the other browsers from the description???

@IKhitron: No, you never mentioned any other browsers in the task description. If you know one, edit it by clicking Edit Task. Thanks.

As I said, it was in Lollipop. You just deleted it. OK, I'll do it now.

You wrote "Lollipop OS". In my brain "OS" stands for "operating system", not for "browser".

IKhitron renamed this task from Star in tab bar disappears after adding page to watchlist in Chrome to Star in tab bar disappears after adding page to watchlist.Jun 11 2018, 4:54 PM
IKhitron updated the task description. (Show Details)
IKhitron added a subscriber: Aklapper.

You wrote "Lollipop OS". In my brain "OS" stands for "operating system", not for "browser".

I see. Possibly you did not know, the Android OS comes with built in web browser, and not mentioning browser here means exctly this browser. I'll clarify this.

Android Lollipop has Chrome as default browser.

??? I can download Chrome as application if I want, and I did it in the past, it's something completely different.

Chrome 60 on Android (Lollipop). Looks like it's a completely different version, visually and functionally, but created by Chrome.

FriedhelmW renamed this task from Star in tab bar disappears after adding page to watchlist to Star in tab bar disappears after adding page to watchlist in Chrome.Jun 11 2018, 5:22 PM
ovasileva moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.

Fascinating. This definitely looks like a browser bug. Now that Jon has identified the cause, I think we can easily work around it…

Change 442116 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/skins/Vector@master] Use exact pixel value to work around a Chrome bug

https://gerrit.wikimedia.org/r/442116

I have also started to see this recently in Chrome. I assumed it was a regression in Chrome canary, and not something on our end. Do we have an upstream report? In any event, if there is a workaround and it has reached Chrome stable, I don't oppose a temporary hack.

@Krinkle In this case it seems like a browser bug, but also an imperfect calculation on our side. So the fix provided by Bartosz is actually improving our code anyhow independently from a Chrome bug.

@Volker_E Thanks, makes sense. So, not a hack :) - If you file a Chromium bug, be sure to also mention it at issue 463348 for optimum tracking and visibility.

Jdlrobson set the point value for this task to 2.Jun 26 2018, 4:16 PM

Change 442116 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Use exactly calculated value to work around a Chrome bug

https://gerrit.wikimedia.org/r/442116

Change 442170 had a related patch set uploaded (by Jforrester; owner: Bartosz Dziewoński):
[mediawiki/skins/Vector@wmf/1.32.0-wmf.10] Use exactly calculated value to work around a Chrome bug

https://gerrit.wikimedia.org/r/442170

matmarex claimed this task.

Change 442170 merged by Pmiazga:
[mediawiki/skins/Vector@wmf/1.32.0-wmf.10] Use exactly calculated value to work around a Chrome bug

https://gerrit.wikimedia.org/r/442170

Mentioned in SAL (#wikimedia-operations) [2018-06-28T14:49:57Z] <pmiazga@deploy1001> Synchronized php-1.32.0-wmf.10/skins/Vector/components/watchstar.less: SWAT: [[gerrit:442170|Use exactly calculated value to work around a Chrome bug (T196610)]] (duration: 01m 00s)

Vvjjkkii renamed this task from Star in tab bar disappears after adding page to watchlist in Chrome to xhbaaaaaaa.Jul 1 2018, 1:05 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed matmarex as the assignee of this task.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed the point value for this task.
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from xhbaaaaaaa to Star in tab bar disappears after adding page to watchlist in Chrome.Jul 2 2018, 3:12 PM
CommunityTechBot closed this task as Resolved.
CommunityTechBot assigned this task to matmarex.
CommunityTechBot set the point value for this task to 2.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.