1455538 - Iframe cannot be scrolled after hovering a point from the Shape Path editor

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[David Olah]

[Affected versions]: 
Nightly 61.0a1

[Affected platforms]:
Platforms: Windows 10 x 64, Windows 7 x 32, Mac OS X 10.12 and Ubuntu 16.04 x64.

[Steps to reproduce]:
1. Go to about:config and set "layout.css.shape-outside.enabled" to true.
2. Go to "https://drive.google.com/file/d/1zAOwoVHBDk8RmX97N7lvvdbd5KPWRk6u/view?usp=sharing" downloaded it in .html formate and open it with Firefox
3. Right click on the image and then click on "Inspect Element".
4. Click on the button displayed next to clip-path to toggle the shape tool on
5. Scroll the iframe so that one of the points is exactly on the bottom margin of the iframe. (In this case, the point can be moved in and out of the iframe)
6.move the point from above in the iframe
7. Scroll the iframe

[Expected result]:
- The iframe can be scrolled with the mouse wheel and the scroll bar

[Actual result]:
- The iframe cannot be scrolled from the mouse wheel

Comment 1

[Rares Doghi, Desktop QA]

New Scenario for this issue:

[Steps to reproduce]:
1. Go to about:config and set "layout.css.shape-outside.enabled" to true.
2. Go to "https://drive.google.com/file/d/1zAOwoVHBDk8RmX97N7lvvdbd5KPWRk6u/view?usp=sharing" downloaded it in .html formate and open it with Firefox
3. Right click on the image and then click on "Inspect Element".
4. Click on the button displayed next to shape-outside to toggle the shape tool on
5. Move any of the Highlighter points.
6. Use the Mouse wheel to try and scroll up or down.

[Expected result]:
- The iframe can be scrolled with the mouse wheel and the scroll bar

[Actual result]:
- The iframe cannot be scrolled from the mouse wheel

Razvan can you please take a look at the new scenario.

Comment 2

[Razvan Caliman [:rcaliman]]

This can be reproduced by just hovering over any point of the editor and attempting to scroll while hovered.

The issue occurs because the event target of the scroll event moves from within the iframe to the editor overlay which inherits the vertical and horizontal constraints of the host window. In the example given, the host page doesn't scroll because it's not taller than the iframe. If resizing the host window to force vertical scroll on it, the result is that the host page (not iframe) will scroll even while hovering a point of the shape path editor.

I'm not convinced this should be considered a major / P4 issue. The user can workaroud this by moving the cursor away from the point and scrolling to scroll the iframe.

@pbro, what do you think?

Comment 3

[Patrick Brosset <:pbro>]

(In reply to Razvan Caliman [:rcaliman] from comment #2)
> I'm not convinced this should be considered a major / P4 issue. The user can
> workaroud this by moving the cursor away from the point and scrolling to
> scroll the iframe.
True on macOS, you can scroll again by just moving your mouse away from the point. I wouldn't even consider it a bug on that platform in fact.

On Windows however, this isn't quite enough. For the mousewheel to work again inside the iframe I need to click somewhere else first (either in the parent page area, or on the scrollbar of the iframe, somehow clicking inside the iframe doesn't do it).

This also happens with any scrollable element, not just iframes.

So, while I think this isn't a major problem overall, and shouldn't block shipping the tool, I would triage this as a P2 which we should try to address in a not too distant future.