| Summary: | Support devicePixelContentBoxSize with ResizeObserver | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Gregg Tavares <gman> | ||||||
| Component: | DOM | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | RESOLVED DUPLICATE | ||||||||
| Severity: | Normal | CC: | karlcow, simon.fraser, webkit-bug-importer | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | WebKit Nightly Build | ||||||||
| Hardware: | Unspecified | ||||||||
| OS: | Unspecified | ||||||||
| Attachments: |
|
||||||||
Created attachment 468678 [details]
rendering in safari, firefox, chrome
devicePixelContentBoxSize.inlineSize is undefined in Safari.
Thanks Gregg, https://drafts.csswg.org/resize-observer/#dom-resizeobserverentry-devicepixelcontentboxsize https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/devicePixelContentBoxSize#browser_compatibility Probably a duplicate of Bug 219005 *** This bug has been marked as a duplicate of bug 219005 *** |
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