Toggling Scroll Mode changes font weight unexpectedly

[guile-rc]

Describe the bug
When toggling Scroll Mode in Foliate, the font weight of the text changes unexpectedly.

To Reproduce
Steps to reproduce the behavior:

1. Open any book in Foliate.
2. Toggle the Scroll Mode on and off.

Expected behavior
The font weight should remain consistent across both modes (normal and scroll).

Screenshots

Version:

• Foliate version: 3.1.1
• OS/Distribution and version: Fedora 40
• Desktop environment: GNOME 46
• Installation method: Flatpak

Additional context
The system font is configured without hinting and utilizes subpixel smoothing.

[johnfactotum]

The text does actually look bolded to me, rather than being some sort of rendering difference. I would say there's a media query in the book's stylesheet that changes the font weight. But that also seems unlikely.

Does it happen wit every book and every font? Does it happen in the online demo reader, https://johnfactotum.github.io/foliate-js/reader.html, in Firefox or Chrome?

[guile-rc]

In the app, it happens with every book, whether it’s from Amazon, Standard Ebooks or made by me. However, the issue doesn’t appear in the online demo reader.

[johnfactotum]

This is very peculiar. Does it happen if you use the online reader in Epiphany? And what font are you using? Have you tried using the inspector to see if there are extra styles applied in different modes?

[guile-rc]

The problem does occur in Epiphany. The font-weight property in the browser remains set to 400, however. I'm using Crimson Pro, but it happens with every font I've tested.

[johnfactotum]

Well, it must be a WebKitGTK bug, then.

Recently they replaced Cairo with Skia, which has resulted in some bugs related to font rendering. See https://blogs.igalia.com/carlosgc/2024/09/27/graphics-improvements-in-webkitgtk-and-wpewebkit-2-46/. If you're using WebKitGTK 2.46, that must be related to this.

I suppose you can try reporting this at https://bugs.webkit.org. Though it would be better if one can create a minimal example. It's probably either very wide multicolumn text (paginated mode) or very tall iframe (scrolled mode) that triggers the abnormal rendering. If it's the former, you would see bold text on most webpages. And it's probably something dependent on the hardware setup as well; at least I'm unable to reproduce this.

[guile-rc]

Made a bug report: https://bugs.webkit.org/show_bug.cgi?id=281824