CSS grid background rendering issue
This is with GTK 2e63b53b (mid-September 2021), but the exact version is not needed to trigger the bug.
The grid background on this button (which is on the main page of gnome-software) is supposed to fill the entire button, but is offset from the top and left sides of the button for some reason. This worked correctly (with the same CSS) in GTK3.
It’s supposed to look like this (screenshot from before porting gnome-software from GTK3 to GTK4; font style and border differences are irrelevant):
The CSS is here, and copied here for searchability:
.category-tile.category-work {
box-shadow: inset 0 0 0 1px #efd185;
color: #1c71d8;
background-color:#fdf8d7;
background-image: linear-gradient(#deddda 1px, transparent 1px),
linear-gradient(90deg, #deddda 1px, transparent 1px);
background-size: 10px 10px, 10px 10px;
background-position: -1px -4px, center -1px;
}
.category-tile.category-work:hover {
box-shadow: inset 0 0 0 1px shade(#efd185, 1.08);
background-color: shade(#fdf8d7, 1.03);
background-image: linear-gradient(shade(#deddda, 1.04) 1px, transparent 1px),
linear-gradient(90deg, shade(#deddda, 1.04) 1px, transparent 1px);
}
.category-tile.category-work:active {
background-color: shade(#fdf8d7, .93);
background-image: linear-gradient(shade(#deddda, .97) 1px, transparent 1px),
linear-gradient(90deg, shade(#deddda, .97) 1px, transparent 1px);
box-shadow: inset 0 0 0 1px shade(#efd185, 1.08),
inset 0 4px 2px -2px mix(black, transparent, 0.8);
}
There are some other rules in that file which apply to .category-tile
which might end up being relevant.
@matthiasc, this is what was discussed on IRC in #gnome-software on 2021-10-07.
Edited by Philip Withnall