WebView Resize Jitter Bug

General JUCE discussion
1

I’ve noticed a resize jitter in WebBrowserComponent when resizing a window that contains it. This occurs on both macOS and Windows, within my own projects, and I’ve confirmed it also happens in the JUCE WebBrowserDemo.

When resizing:

  • If the browser content overflows on an axis, resizing appears smooth.
  • If the content has overflow: hidden on an axis, a white gap appears during resize.

For example:

  • If overflow is hidden on the X axis, a white gap appears on the right edge of the browser while resizing.
  • If overflow is hidden on the Y axis, the gap appears at the bottom edge.

To rule out background issues I tried:

  • Painting the JUCE component background black
  • Using withBackgroundColour() via withWinWebView2Options

However, the exposed area still appears white, so I’m not sure where the white background is coming from.

For comparison, this behaviour does not occur in Firefox or other browsers, where resizing the same content remains smooth without exposing a background gap.

I’ve tested this with JUCE 8.0.12 and the latest develop branch, and both exhibit the same behaviour.

I’ll attach an MP4 demonstrating the issue.

Has anyone else experienced this, or found any workarounds?

2

I see just as much (if not more) in Safari and Chrome (at east on macOS). It seems to only be a problem if you drag the left hand side of the window. Can you check if you’re seeing the same too? If so this might be difficult to pin down to being a JUCE issue. Interestingly though, I also have Arc installed and that seems OK.

3

Hi Anthony,

Thanks for your reply.

I’m seeing the same behaviour in Safari as well. However, Firefox seems to handle it fine.

For me it does occur regardless of which resize handle is used, but it does seem more pronounced when resizing from the top or left edges.