right:0px on absolutely positioned elements breaks with viewport width=device-width

• Component: CSS
• Status: REOPENED ---

[Josh Moyer]

An example page that demonstrates the issue is available at http://jmoyer.nodomain.net/webkitbug.xhtml

If an absolutely positioned element, such as the <body/> or its first child, specifies the "right" CSS property with a value of "0px" (and also top, bottom and left), the right side of the element's box moves farther from the right edge of the viewport as the device-width narrows, with significant effects observable on an iPhone 6 in landscape orientation with iOS 12.1.4 and also with Chrome 72.0.3626.119 (64-bit) when in mobile landscape emulation mode.  One specific device width tested was 110, where the right side of the element/content isn't even halfway across the viewport.  As mentioned in the title, this only occurs with smaller widths of device-width in the viewport <meta/> and pages render correctly in desktop mode, regardless of the viewport width.  The upshot of the expected behavior is that content should fill the width (100%) of the viewport and not 66% or 50% in both desktop and mobile rendering modes.  Current versions of Firefox and IE were able to render this content as expected.

[Josh Moyer]

You know, looking into it further, it happens even with statically positioned elements, as the updated example shows.

[Josh Moyer]

Sorry, this bug is confounding to me.  It is real, despite my thinking otherwise for a moment.  viewport widths of less than 253 for the included sample, but the problem can be magnified or compounded with other, more complicated stylesheets.

[Radar WebKit Bug Importer]

<rdar://problem/48789960>