[1.6] Scrollbox not scaling properly at window

Hi,

I observed that ScrollBox component is not scaling properly with Scale to Device option in UI Editor. I am trying to create a fullscreen gallery and there is problem when I creating Content of 6400 px width. It’s not scaling properly.

Can you check it, Please ?

Cheers

Thank you @chase :slight_smile:

Hi @jasiuj - I’ve created a ticket and assigned to one of our engineers to investigate. Thank you for bringing this to our attention!

Hi @jasiuj,

We haven’t been able to reproduce this problem. Could you post a screenshot or describe more details? E.g. which element do you have Scale to Device checked on? What does the hierarchy look like?

Thanks,
Rob

Hi @RobP, my configuration looks like that:

As you can see, I setup whole screen ScrollBox with Fixed width content which have 100% height and enabled option Scale to device. As I suppose this should generate Content with fullscreen dimension for each piece. So there shouldn’t be empty space above and under the Images and each image should fill whole screen (so I should see just one image at fullscreen).

I attached comparison 3 vs 4 image scroll box scaling results:

3480-slider-scaling-canvases.zip (8.44 KB)slider-scaling-canvases.zip - here is my UI Canvases.

As you can see 3x (3x1600px in my case so width of Container is 4800px vs 4x1600px : 6400px). The version with 3 images scale better that with 4 images. It’s scales each elements width to to full width of screen. But still there is not contained 100% height of screen.

Do I right ? If no how can I create responsive full screen gallery ? To adopt on different screen resolutions ?

Thank you @RobP for exploitation, this solve my problem. I confirm that it’s works :slight_smile:

Hmm, about add non-uniform scale and changed aspect ratios this could be nice feature to add.

Hi @jasiuj,

Thanks for the detailed description of the problem. So the issue is about using “Scale To Device” on the Content element of a ScrollBox.

The issue you are seeing with the image not matching the height of the screen is because the anchors are used to stretch the height prior to the scale being applied. It can be avoided by not setting the top and bottom anchors of the content element apart (Top 0%, Bottom 100%). If you leave them at 50%, 50% and set the height to 900 then the Scale to Device should set it to the correct height - but only if the screen aspect ratio does not change. This is because ScaleToDevice always applies a uniform scale. In this particular case it looks like you really want it to apply a non-uniform scale and change the aspect ratio of the image - is that correct? That is a feature that we could add.

In reproducing this I noticed that there appears to be a bug with Snap to Children when the content element is scaled. I will enter an issue for this.