1972770 - Underlying color picker screenshot too small in RDM

Status: NEW

(DevTools :: Responsive Design Mode, defect, P2)

Description

[Holger Benl [:hbenl]]

When using the color picker in RDM on a page without a viewport meta tag, the underlying screenshot that is initially taken for the color picker is too small and the color picker only works in a top left portion of the page.

STR:

• open data:text/html,<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
• open RDM
• open the inspector and enable the color picker
• move over the page's text from left to right

This only happens on pages without a viewport meta tag, so the color picker works correctly for data:text/html,<meta name="viewport" content="width=device-width"><h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>.
Note that when you resize the RDM viewport, the color picker starts working correctly. That's because after resize another screenshot is taken through a different method (which has the downside of not handling remote iframes) that uses the correct size.
You can observe the different screenshots by setting a breakpoint here and looking at this.pageImage.

Comment 1

[Holger Benl [:hbenl]]

This also affects the screenshots taken using the screenshot button in the RDM toolbar.