Gap on the right side of the mosaic

[borekl]

When the mosaic does not overflow the viewport in the y axis, the initial state of the mosaic leaves a gap on the right side (see this image and this actual example).

Once you resize the browser window, the mosaic: either gets refitted correctly and the gap disappears (in Firefox), or the gap remains (Chrome). It's important that there's no y-axis overflow, because otherwise the gap space is taken up by the scroll bar.

I have no idea where the problem is, can anyone else replicate this?

[tin-cat]

Hi @borekl, thanks for the report! I wasn't able to replicate the problem in the following browsers:

• Chrome 70.0.3538.110 64bit MacOs
• Firefox 63.0.3 64bit MacOs
• Safari 12.0.1 MacOs

And I'm sorry to say I have no idea where the bug could come from, even if it's browser-dependant and it happens only in some specific versions of Chrome/Firefox, it could be problematic for some people. What versions of Chrome and Firefox have you tested it with?

From your screenshot and description, it might seem the problem originates in the calculation of the available width being done in before and after the DOM has changed, that would explain why you see the gap in the initial state, but it disappears after resizing the window (when the DOM might have changed).

I see in your example that you're calling .Mosaic() inside a jQuery ready call, so the DOM should be done by then.

Let see if anyone else provides feedback on this! If only I could replicate the problem!

[borekl]

This is very strange, because it happens in every browser/OS combo I try:

• Windows 10 / Internet Explorer 11.785.16299.0
• Windows 10 / Chrome 64.0.3282.119
• Windows 10 / Firefox 63.0.3
• Windows 7 / Firefox 63.0.3
• Linux Mint 18.2 / Firefox 63.0.3

Interestingly, now the behaviour is that the gap always remains there. Also note, that the gap's width is always that of a scrollbar. When you're resizing the window you can even see the scrollbar flickering in and out. In fact, I can make this failure happen even on your own example on your website, it just requires zooming out to get rid of the overflow.

Did you make sure that the geometry of your viewport looks like that on the screenshot? There must not be any overflow in the vertical direction (ie. at the bottom of the screen).

There's related failure that I haven't yet logged which is just different manifestation of the same underlying issue: sometimes when you resize the viewport the gallery mosaic: Sometimes the mosaic completely falls apart like this:

In my gallery I am working on I have solved the issue (hopefully temporarily) by using Overlay Scrollbars library, which puts the BODY element into overflow: hidden and the whole issue goes away. But it surely would be nice to find some solution to this.

[borekl]

I'd like to add one observation: The broken behaviour doesn't seem to be happening when the machine in question uses no scaling factor for display. At work all is fine on both Linux/Windows 10, but at home I have a 4K display where I have scaling factor of 1.75 and that's where the problem can be readily observed.

[tin-cat]

Hi @borekl, I had to deal with a similar bug in jQuery-mosaic in the past that caused the same behavior when using zoom levels other than 100%, I solved that problem already but I'm pretty sure this bug think you've found might be related to the same type of issue, it was related to the way some browsers handle decimal values for different zooming levels, and the way jQuery-mosaic rounds those values to create a mosaic that fits perfectly.

I tested it in a high density display with MacOs without any problems, but unfortunately I cannot test it under Windows since I do not own a high density display for my windows PC, so I can't track down this error. I might be trying a windows virtual machine, I think you can set up one with a virtual high density display so it fools windows into thinking it's running in one, and triggers the windows high density scaling thing that might be causing the bug.

Thanks for reporting this!

[borekl]

@tin-cat I am pretty sure that you can adjust scaling factor with any display, ie. HiDPI display is not needed.

[tin-cat]

Oh yes! I tried that on a windows 10 machine but the bug didn't appear, that's the weird thing! :)

[tin-cat]

Hi @borekl! Unfortunately I was unable to replicate the problem in a HiDPI display so I cannot debug it. Increasing the scaling in Windows 10 does not appear to cause the problem.

As per my investigation in some past bugs, it seems to me this problem could be related to the way some browsers report sub-pixel dimensions to javascript, and how those decimal values are trated by Javascript.

I do own a macbook with a retina display, so I'm thinking I would be able ti install a windows 10 there, will come back with some results!

Thanks!