Bug 264158 - Support devicePixelContentBoxSize with ResizeObserver
Summary: Support devicePixelContentBoxSize with ResizeObserver
Status: RESOLVED DUPLICATE of bug 219005
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2023-11-03 07:44 PDT by Gregg Tavares
Modified: 2023-11-20 06:08 PST (History)
3 users (show)

See Also:

example showing the need for devicePixelContentBoxSize (1.61 KB, text/html)
2023-11-03 07:44 PDT, Gregg Tavares
no flags Details
rendering in safari, firefox, chrome (300.96 KB, image/png)
2023-11-20 06:04 PST, Karl Dubost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Gregg Tavares 2023-11-03 07:44:10 PDT
Created attachment 468470 [details]
example showing the need for devicePixelContentBoxSize

It's impossible to get the correct sizes for elements in Safari because it does not support devicePixelContentBoxSize with ResizeObserver

See attached example: it makes 3 elements each 33% the size of their parent

Asking the sizes via ResizeObserver or via getBoundingClientRect shows all 3 elements return the exact same size but take a screenshot measure and you'll see the center element is 200 device pixels where as the left and right elements are 199 device pixels

This is one of the things that devicePixelContentBoxSize is for.  Finding out the actual sizes of elements for pixel perfect rendering

Try it in Firefox or Chrome and they'll tell you the sizes via devicePixelContentBoxSize
Comment 1 Radar WebKit Bug Importer 2023-11-10 06:45:14 PST
Comment 2 Karl Dubost 2023-11-20 06:04:25 PST
Created attachment 468678 [details]
rendering in safari, firefox, chrome

devicePixelContentBoxSize.inlineSize is undefined in Safari.