The pop-up for CSS documentation remains visible while clicking in the CSS value field. Clicking on an inline swatch in the same value field causes another pop-up to show. The CSS documentation pop-up is not hidden automatically. Steps to reproduce: - Load the attached test case - Inspect the `<body>` element - In the Styles panel, click the "info" icon next to a CSS declaration to open the CSS documentation pop-up. - For the same CSS declaration, click the "equals" next to the CSS variable to see its resolved value. Result: Both pop-ups are visible. The documentation pop-up looks broken because its background image is sourced from the same canvas context used for all visible pop-ups. As the pop-up for an inline swatch is drawn, its background is shared with the other visible pop-up. ``` https://searchfox.org/wubkat/rev/3db59430108ca0e3f01ec4d6ac7adbc8ec6fa7c4/Source/WebInspectorUI/UserInterface/Views/Popover.js#425 ``` let context = document.getCSSCanvasContext("2d", "popover", scaledWidth, scaledHeight); ``` https://searchfox.org/wubkat/rev/3db59430108ca0e3f01ec4d6ac7adbc8ec6fa7c4/Source/WebInspectorUI/UserInterface/Views/Popover.css#38 ``` .popover { ... background-image: -webkit-canvas(popover); } This shared context is by design: https://webkit.org/blog/176/css-canvas-drawing/ "All objects that observe a CSS canvas of the same name are sharing that canvas."
<rdar://problem/96433005>
Created attachment 460678 [details] test case
Created attachment 460679 [details] Video of issue
Pull request: https://github.com/WebKit/WebKit/pull/2076
Committed 252175@main (a56e4283f9a6): <https://commits.webkit.org/252175@main> Reviewed commits have been landed. Closing PR #2076 and removing active labels.