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.
- Open some non watched (watched) page.
- 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.
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;
}