Auto-scroll ignores CSS transformations on focus in iframes

• Component: Frames
• Status: NEW ---

[Chad von Nau]

Webkit/Blink browsers ignore CSS transformations when scrolling content to show focused elements in iframes. This can cause the document to scroll even when it's not necessary.

Steps to reproduce:

1. Visit http://codepen.io/cvn/pen/KwVePP
2. Resize your browser window so you can't see the pink lines
3. Press tab a few times to cycle focus through the inputs
4. The document will scroll to show elements that overflow the viewport
5. Tick the "scale" checkbox
6. Press tab a few more times

Expected result:

The document should not scroll when focusing on an input inside the iframe since the entire iframe is already visible

Actual result:

The document scrolls to show the focused elements as if they were not scaled.

Notes:

* This only happens when there are elements that cause overflow.
* The position of the focused elements appears to always be calculated from the top left of the iframe.
* The document scrolls even if it is overflow:hidden;
* Firefox 36 handles this correctly, and does not scroll unnecessarily.

[Chad von Nau]

Also reported to Chromium: https://code.google.com/p/chromium/issues/detail?id=470891

[Chad von Nau]

The original issue, focus causing the window to auto-scroll to the wrong position, seems to be fixed.

But now there's a different issue. When focusing on an input in a transformed iframe, the window does not auto-scroll when it should.

You can see this if you open the demo, tick the scale box, make your window small, and scroll to the right so the so the iframe is not visible. When you tab through the inputs inside the iframe, there is no auto-scroll. Compare this to the inputs outside of the iframe, which trigger auto-scroll as expected.