Blurry text after going fullscreen on web

[kevinfoley]

1. Open a page containing a Feathers app in a Flash-compatible web browser (e.g. Firefox, Edge)
2. Change stage display state to FULL_SCREEN_INTERACTIVE
3. All labels rendered with TextBlockTextRenderer will now appear blurry
4. For controls that support hover states (e.g. buttons), hovering the mouse over the control will cause the text to re-render, making it crisp

Occurs in all versions of Feathers. Not tested with other text renderers.

[joshtynjala]

Does the contentScaleFactor change when you go full screen? Textures are not automatically updated when the contentScaleFactor changes.

You could try setting updateSnapshotOnScaleChange to true on TextBlockTextRenderer. Be aware that this will cause your text renderers to check for scale changes every single frame, which could affect performance.

[kevinfoley]

Yes, the contentScaleFactor changes. Is there any solution which is less performance-intensive?

[kevinfoley]

After looking through the code for TextBlockTextRenderer, it looks like the code you were referring to is in the render() function. However, from testing with breakpoints, it seems like this isn't called every frame for static text. It gets called if the text moves/changes, or the state changes (e.g. when mouse hovers over the text). Does that sound right, or am I missing something?

[joshtynjala]

Hmmm... you're right. I wrote that before skipUnchangedFrames was added to Starling. It should still work as described when skipUnchangedFrames is false, but scale changes won't be detected automatically anymore if skipUnchangedFrames is true.

[kevinfoley]

@joshtynjala It works as desired when updateSnapshotOnScaleChange is set to true, even if skipUnchangedFrames is enabled. The text re-renders when going fullscreen.

[joshtynjala]

Great! Perhaps Starling automatically calls setRequiresRedraw() when contentScaleFactor or the back buffer size changes.