Bugzilla

Several Puppeteer P2 tests are encountering failures due to discrepancies in screenshots taken from a modified viewport compared to those produced by Chrome. The underlying issue lies in the fact that we display scrollbars, while Chrome completely disables them. This leads to differences in the default clientWidth and clientHeight. Consequently, when scrollbars are not shown, the dimensions are larger, causing a distinct reflow of elements on the page.

For instance, setting the viewport to 500x500 currently results in 500px in width for pages without a vertical scrollbar, but it becomes 485px when a scrollbar is present. Since we cannot dynamically adjust the viewport size based on the loaded document or scrollbar visibility, it is essential to ensure that the viewport is set to the exact size. Achieving this, however, seems possible only when scrollbars are disabled or overflow scrollbars are visible. It's important to note that the latter scenario may introduce challenges with HIT testing, especially if elements are positioned beneath the scrollbars.

Several Puppeteer P2 tests are encountering failures due to discrepancies in screenshots taken from a modified viewport compared to those produced by Chrome. The underlying issue lies in the fact that we display scrollbars, while Chrome completely disables them. This leads to differences in the default clientWidth and clientHeight. Consequently, when scrollbars are not shown, the dimensions are larger, causing a distinct reflow of elements on the page.

For instance, setting the viewport to 500x500 currently results in 500px in width for pages without a vertical scrollbar, but it becomes 485px when a scrollbar is present. Since we cannot dynamically adjust the viewport size based on the loaded document or scrollbar visibility, it is essential to ensure that the viewport is set to the exact size. Achieving this, however, seems possible only when scrollbars are disabled or overflow scrollbars are visible. It's important to note that the latter scenario may introduce challenges with HIT testing, especially if elements are positioned beneath the scrollbars.

As the attached image shows the 9th box reflows to the next row while it should be visible as last box of the first row.