Summary: | Wrong image display for Non-integer sized elements and background-position specified as % | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Andrew Collier <webkitbugzilla> | ||||||||||
Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||||||||
Status: | NEW --- | ||||||||||||
Severity: | Normal | CC: | koivisto, simon.fraser, webkit-bug-importer, zalan | ||||||||||
Priority: | P2 | Keywords: | InRadar | ||||||||||
Version: | WebKit Nightly Build | ||||||||||||
Hardware: | All | ||||||||||||
OS: | All | ||||||||||||
Attachments: |
|
Description
Andrew Collier
2022-06-21 03:03:56 PDT
Created attachment 460368 [details]
webkit rendering at 2x
Created attachment 460369 [details]
correct 2x rendering by Edge
Created attachment 460416 [details]
Test reduction
Webkit computes the same position for 0px - 0.25px, 0.25px - 0.75px and 0.75px - 1px ranges. It looks like we use a "pixel snapped" value (0px, 0.5px and 1px on a 2x display) when computing the background position as opposed to just using the "raw" value.
Yeah, so we apparently pixel-snap too early in the process of generating background images. @@ -1258,7 +1258,6 @@ BackgroundImageGeometry RenderBoxModelObject::calculateBackgroundImageGeometry(c } } else { positioningAreaSize = borderBoxRect.size() - LayoutSize(left + right, top + bottom); - positioningAreaSize = LayoutSize(snapRectToDevicePixels(LayoutRect(paintOffset, positioningAreaSize), deviceScaleFactor).size()); } } else { LayoutRect viewportRect; ^^ fixes the issue. > ^^ fixes the issue.
the png background painting but not the svg.
(In reply to zalan from comment #4) > Yeah, so we apparently pixel-snap too early in the process of generating > background images. > > @@ -1258,7 +1258,6 @@ BackgroundImageGeometry > RenderBoxModelObject::calculateBackgroundImageGeometry(c > } > } else { > positioningAreaSize = borderBoxRect.size() - LayoutSize(left + > right, top + bottom); > - positioningAreaSize = > LayoutSize(snapRectToDevicePixels(LayoutRect(paintOffset, > positioningAreaSize), deviceScaleFactor).size()); > } > } else { > LayoutRect viewportRect; > > ^^ fixes the issue. Sadly even with this change, the rendered content is slightly different from what Blink and Gecko have. Due to the LayoutUnit's fixed point denominator (64), 32.15234234px is resolved to 34.140625px which makes the background image shift slightly to the right. (In reply to zalan from comment #5) > > ^^ fixes the issue. > the png background painting but not the svg. It also breaks bug 144986 (broken in Chrome too). I think someone with image background (swidt) should be looking into this. Still present in Safari technology preview 156. Still present in Safari technology preview 168. |