Bug 195525 - right:0px on absolutely positioned elements breaks with viewport width=device-width
Summary: right:0px on absolutely positioned elements breaks with viewport width=device...
Status: REOPENED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 12
Hardware: All All
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-03-09 18:04 PST by Josh Moyer
Modified: 2019-03-11 17:00 PDT (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Josh Moyer 2019-03-09 18:04:01 PST
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.
Comment 1 Josh Moyer 2019-03-09 18:18:45 PST
You know, looking into it further, it happens even with statically positioned elements, as the updated example shows.
Comment 2 Josh Moyer 2019-03-09 21:20:11 PST
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.
Comment 3 Radar WebKit Bug Importer 2019-03-11 17:00:58 PDT
<rdar://problem/48789960>