HTMLViewer jerky scrolling past images

General
1

Hi,

In my desktop project (for Mac and Windows), I use an HTMLViewer to display my website and some local HTML files. I have noticed that when I scroll past images, the scrolling is not smooth and becomes jerky. If I view the same page in the Safari browser, there is no jerkiness. The images are in JPEG format and are mostly 100-500kB in size. The same symptoms occur, whether the URL source is online or a local file.

I am using xojo release 2019r1 on macOS Mojave on my 2016 Macbook Pro. An example would be to view this page in an HTMLViewer:

https://www.mak95.com/studynotes/Equipment%20Safety.html

It’s not a big deal, just annoying, as I feel it detracts from the user experience. I couldn’t find any information regarding this issue. Is there any setting I can tweak to improve the scrolling performance? Thanks.

2

Can you share the Xojo code?

I tried to reproduce the behavior with that URL and HTMLViewer, but for me I can’t see any difference. Tested on Xojo 2019r1 and 2018r3, 2 different Macbook Pro, macOS 10.12.6. Let me try on Mojave with a remote debug.

Edit: tried on Macbook Air with Mojave 10.14.3 then updated to 10.14.5 and I don’t see any jerkiness.

3

I have 2019R1 on Mojave 10.14.4 on a Mid-2015 Macbook Pro and ran a little test with a Xojo built browser and do see some jerkiness when scrolling past some of your images.

Granted you have what appears to be quite a large amount of content on this page and some of those images could be optimized by having them downsized in advance of the page load (to potentially fixed HTML/CSS dimensions), so the HTMLViewer doesn’t have to do the resizing work dynamically.

For example, your file “images/TopicID24/EP%20Junction.jpg” is 3024 x 4032 pixels in size, but is being shown in a space on your page that is only 729.667 x 972.883 pixels large (according to the sized window I was using).

I don’t know all the technical ins & outs of how the WebKit (or Native) rendering engine is implemented for the Xojo HTMLViewer, but from what little I understand, the implementation is not necessarily as fully optimized or feature complete as using Safari or another browser like Firefox.

So doing what you can to optimize your page content and image sizing, before it is loaded in a browser, should bring you some benefit that may offset what you’re seeing.

I hope that helps.

PS. Nice work on the site, by the way.

4

It’s also worth noting that Xojo is using the older “WebView” on macOS; which has been superseeded. There is a Feedback report (can’t look it up at the moment) for upgrading to the newer HTMLViewer control, this may (or may not) account for the difference.

5

Thanks everyone for taking the time to look into it and reply.

[quote=437433:@Alberto De Poo]Can you share the Xojo code?

I tried to reproduce the behavior with that URL and HTMLViewer, but for me I can’t see any difference. Tested on Xojo 2019r1 and 2018r3, 2 different Macbook Pro, macOS 10.12.6. Let me try on Mojave with a remote debug.

Edit: tried on Macbook Air with Mojave 10.14.3 then updated to 10.14.5 and I don’t see any jerkiness.[/quote]

There is nothing special in the code, it is simply something like: htmlviewer.LoadURL(url)
If you are not seeing it on testing, on the one hand it’s annoying that the problem is not consistently reproducible and makes it harder to identify the cause, on the other hand, hopefully it means most of my users won’t have this issue.

[quote=437437:@Scott Cadillac]
Granted you have what appears to be quite a large amount of content on this page and some of those images could be optimized by having them downsized in advance of the page load (to potentially fixed HTML/CSS dimensions), so the HTMLViewer doesn’t have to do the resizing work dynamically…

I hope that helps.

PS. Nice work on the site, by the way.[/quote]

Thanks for your kind words :slight_smile: I worked my way through all the tutorials on w3schools.com and that is the end result.

I tried changing the CSS so that all images are displayed at a fixed width, 600px (was previously set to 70%). Unfortunately that didn’t seem to make a difference. However, I did notice that if I make the htmlviewer size smaller - and image widths set to 70% - so that the images are smaller, then the jerkiness is much less noticeable. So I’m sure you are on the right track and it has to do with what behind the scenes work the browser has to do to render the images.

Well, somewhere in the Xojo User Guide there is a quote saying something like “trying to optimise too early is the enemy of productivity”. I have much bigger things to sort out to get my project fully functional, so I might park this issue for the time being :stuck_out_tongue:

Thanks again for the input, it is much appreciated.

6

Consider what that’s doing though. That’s not pre-sizing the image, you’re telling the browser that it needs to scale the massive images down every time it displays.

That’s referring to spending time over-optimizing code. Optimizing websites is a must.

7

Ah, I see, that is pretty obvious, isn’t it? You can tell I’m an amateur…

I did a bit more experimenting, and have come away with some interesting results:

My original images were variable in size, but mostly pretty large (width >2000pixels), total 13.4MB for 97 images

  1. I used Preview to resize all of my images to width 1200px (with resampling). Total 8.3MB for 97 images.
    a) If I leave the CSS to display images as width 70%, the jerkiness remains.
    b) However, when I change the CSS to display images at a fixed width of 600px, scrolling is much smoother! Not completely smooth, like Safari, but close enough to call the issue fixed.

  2. I tried resizing all my images to 600px width (with resampling) but the loss in quality was too much. So I tried resizing to 600px without resampling, total 13.4MB for 97 images. Even with CSS set to display images at a fixed width of 600px, the jerkiness remained, even though I assume the browser wouldn’t need to manipulate the image size before displaying??

My conclusion is that reducing the size of the images in terms of data (from total 13.4MB to 8.3MB) made more of a difference than making the actual and display sizes match up, and that making the display width fixed rather than a % was also important.

For me, option 1 is the best compromise between decent image quality and smooth scrolling. Thanks :slight_smile:

8

I wonder if my test is smooth because my internet speed is fast?

Anyway, have you tried https://imageoptim.com/mac to reduce disk space and bandwidth?

9

It’s alright, we’re here to help! Glad you’ve found a solution that works best for you :slight_smile: