1848485 - sum of percent widths produces empty pixels

Status: NEW

(Core :: Layout, defect)

Description

[massimo.cassandro]

Attachment: Screenshot

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0
Firefox for Android

Steps to reproduce:

I've made a little demo for an image split effect (see at https://codepen.io/massimo-cassandro/full/OJaYxLa). It consists of dividing and recomposing an image into many strips. Each stripe has a width calculated as a percentage of the viewport width.
While other browsers display the effect correctly, Firefox, and only on certain widths, randomly displays some empty pixel lines

Actual results:

Empty pixels lines are left, may be it is due to a float rounding issue? See attached image or try at https://codepen.io/massimo-cassandro/full/OJaYxLa.
Same problem on firefox android

Expected results:

There should be no empty lines. This is the current behavior of other browsers like Chrome or Safari

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Mayank Bansal]

May be easier to repro by going to https://codepen.io/massimo-cassandro/pen/OJaYxLa , making sure that the code-pane is right aligned nad then resizing the code-pane horizontally.

Comment 3

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

The severity field is not set for this bug.
:jfkthame, could you have a look please?

For more information, please visit BugBot documentation.

Comment 4

[Jonathan Kew [:jfkthame]]

Yeah, this looks like a rounding issue. Possibly when we go to render the image slices, we're rounding the x-position and width to device pixels, where we should instead round each edge independently?