Gallery full images are not shown correctly on Firefox

[AndrewMead10]

Describe the bug

When selecting an image from a gallery, the image is not centered, and the other images behind it are not hidden either, as seen on the demo galleries in the documentation.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

Both exmaples on the doc page for gallery https://www.gradio.app/docs/gallery

Screenshot

No response

Logs

No response

System Info

latest version/ version on the website

Severity

I can work around it

[hannahblair]

Hi @AndrewMead10! Strange - the images are working fine for me on the website right now. Can I ask what system and browser you're using?

[AndrewMead10]

Ubuntu 22 and firefox

[kkuczkowska]

I have a similar problem working on Ubuntu 22 and Firefox. With my demo working locally, preview of gallery picture is small and on the left, not centered, as shown on screenshot below.

When sharing my demo (still running from my local Ubuntu), I had a client running it on Windows using Opera and preview was working correctly - meaning the previewed image was big and centered, as shown below.

[Harryoung]

I meet the same problem on windows! Is there a solution? 🥲

[pink-red]

Reproduction

Both exmaples on the doc page for gallery https://www.gradio.app/docs/gallery

I have the same problem on Arch Linux in Firefox 121.0.1, both with the latest version of Gradio (4.14.0) installed locally and with the doc page. The problem wasn't present previously. For example, on version 3.44.3 Gallery worked correctly.

Severity

I can work around it

@AndrewMead10, could you please share the workaround?

[pink-red]

In fact, 3.50.2 is the last version without the bug. It is present in 4.0.0.

Edit: I stand corrected, the bug is present in 3.50.2. It seems that some images are okay, while others have problems, depending on the size and aspect ratio.

Edit 2: Bisected a bit more. The last working version is 3.44.4. The bug first appeared in 3.45.0.

[AndrewMead10]

@AndrewMead10, could you please share the workaround?

I just ended up using windows, no easy fix i could find for linux

[pink-red]

Found a simple workaround:

with gr.Blocks(css=".preview { width: 100%; }") as demo:
    ...