1521489 - Image collapses to new line even if space is available

Status: UNCONFIRMED

(Core :: Layout: Block and Inline, defect, P3)

Description

[kapoor.vipul.vk]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0

Steps to reproduce:

I've used a slider on my site that positions all images in a single row side by side. The width of the container is calculated by width of the images times the number of images. So let's say the width of image is 1000px and you have 3 images, the container's with will be 3000px. Check the slider at the top of this page. https://www.neford.org/

Actual results:

The final image is collapsed to new line. If I reduce the width of final image by just 0.1px, it comes back to row one.

Expected results:

All images should appear in single row as the container's width is calculated from image widths. This works perfectly on Chrome but not on Firefox.

Comment 1

[Liviu Seplecan]

Attachment: Screenshot (5).png

Comment 2

[Liviu Seplecan]

I've tested that on Firefox Nightly 66.0a1, Firefox beta 65.0b12 & Firefox 64.0.2 and on all cases when I reduce the width size with 0.1px for a second/ millisecond, a blank image is displayed before the 1st image of the carousel loads. Note that the width size will be resized on both images. Even if all width of the image is resized the results is the same. What can be observed is that: reduce the size from the style panel of inspect element board (you can find it in the right side), then the property transform: translate3d should be unchecked - the result: only 1st image is loaded in that case. Repeat this action (check- uncheck this attribute and see what is happening). I've attached a screenshot to see how this occur. So, I tend to believe that isn't a Firefox issue, maybe a CSS part.

Comment 3

[kapoor.vipul.vk]

I believe I didn't make my self clear. I've attached a screenshot, in it you can see that the ul has a width of 5604.52px which comes from the width of the slide (1391.13px) times 4 plus 10px margin on each slide (1391.13 x 4 = 5564.52 + 40 = 5604.52px).

The slider plugin seems to have done its calculation right and all images should fit in a row (div) of 5604.52px but they don't. The last image goes into the next row. But if I change the width of the last image from 1391.13 to 1391.12px, now all images are in a single row as you can see in the style panel.

If you look at the same page in Chrome also, you'll understand what I mean. On Chrome they all fit well.

Attachment: https://www.neford.org/img/67.jpg

PS - How do you attach an image?

Comment 4

[Liviu Seplecan]

About attach an image: you have a button "Attach file" - bellow Attachments section. Browse an image there and press Submit button right at the bottom.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Could you attach a standalone HTML test-case that reproduces the issue? In that website it probably depends on the screen size or what not.

You can attach a file using the "Attach File" link from the top of the bug.

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit auto_nag documentation.