It looks like HTMLDialogs have a really inconsistent frame rate compared to WebDialogs.
Here is a quick test:
htmldlg = UI::HtmlDialog.new({dialog_title:"HTMLDialog"})
htmldlg.set_url("https://www.testufo.com/")
htmldlg.show
webdlg = UI::WebDialog.new("WebDialog")
webdlg.set_url("https://www.testufo.com/")
webdlg.show
On idle, the HTMLDialog reaches a nice 60FPS, but once we open menus the frame rate drops significantly, created annoying stutters.
The WebDialog seems to max out at around 50FPS on my machine. And although it doesn’t seem to have VSync, it feels much more consistent and responsive.
This is something we are experiencing with our new UIs using HTMLDialogs. Despite building nice UIs with modern frameworks, they feel dated and sluggish because of this frame rate issue.
The issue dates back from the introduction of HTMLDialogs in SketchUp 2017 and still occurs in 2020.
I don’t know where this comes from, but it seems to be related to the integration of CEF in SketchUp. When you open https://www.testufo.com/ in regular Chrome or Chromium, there are no stuttering. The same goes for our UIs.
So it looks like something is messing with CEF’s frame rate.
Here is a GIF comparison. On the left is the HTMLDialog in SketchUp 2020, on the right is the exact same version of Chromium (64.0.3282 from 2018).
The GIF is supposed to be 60FPS, but it still doesn’t translate the difference as much as it should. Look at the green charts at the top, you can clearly see the HTMLDialog struggling, especially when scrolling.
The Chromium chart on the right is also affected by the screen recording of the GIF. Here is a screenshot after scrolling on both without screen recording:
Chromium maxes out at 60FPS during animations, the HTMLDialog stays around 10-15FPS.