New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
link

Issue 489206: window.scroll properties being relative to visual viewport break some pages under pinch-zoom

Reported by lpa...@etouch.net, May 18 2015

Issue description

Chrome Version: 45.0.2404.0 (Official Build) 8fd741f2eeb8b6cc59a780b81b4a53db269f6454-refs/heads/master@{#330293} 32/64 Bit.
OS: Windows 8 (Touch Device)

Steps:
1. Launch chrome and navigate to https://translate.google.co.in
2. Click on "turn on handwriting" from bottom left side such that overlay appears.
3. Perform zoom in using pinch and try to write anything inside the text area.
4. Observe.

Actual: Unable to write any text after performing pinch to zoom.

Expected: Should be able to write text in the overlay even after performing pinch to zoom.

This is a regression issue broken in M-44, will soon update the other info.
 
Expected_PTZ.mp4
644 KB Download
Actual_PTZ.mp4
571 KB Download

Comment 2 by smokana@chromium.org, May 18 2015

Labels: ReleaseBlock-Stable
Adding RB label as this is a recent regression

Comment 3 by bokan@chromium.org, May 22 2015

Issue 487986 has been merged into this issue.

Comment 4 by bokan@chromium.org, May 22 2015

Cc: rbyers@chromium.org aelias@chromium.org
This and issue 487986 seem to be caused by having window.scrollX/Y and client coordinates (getBoundingClientRect, MouseEvent.clientX/Y, etc.) be in different viewports; the window scroll properties are w.r.t. the visual viewport while client coordinates are layout. Switching window.scrollX/Y to report the offset of the layout viewport fixes both this issue and the Facebook case.

My opinion is that we should treat browser pinch-zoom as a mechanism primarily for legacy sites. Authors that want to do something more sophisticated should build their own zooming experience (a la Google Maps). I think if we agree on that then it only makes sense to make scrollX/Y, scrollTo, innerWidth/Height and any other properties/methods be relative to the layout viewport. This would mean that pinch-zoom would truly be invisible to the page and we would avoid these kinds of breakages.

The main reason we made these properties relative to the visual viewport was some internal tooling was broken since it actually was trying to work with pinch-zoom (see  issue 433794 ). IIRC Rick also mentioned the IE team found they broke too many sites when they tried it but I'm a little skeptical; I'll reach out to them and see if I can get a clearer picture. 

Another issue that was brought up at the time was that these properties had unusual consistency between browsers so we shouldn't change them (at the least we'd need an intent to ship). With the fact that we now have 3 different pinch-zoom models between Safari, Firefox, Chrome/IE I don't think compatibility on how properties respond to pinch-zoom is at all valuable to web developers. I'd rather add some new APIs to get the visual viewport scroll and dimensions to let authors respond in a simple way to pinch-zoom (for cases where they don't want to rebuild pinch-zoom, like our tooling scenario I mentioned) and keep all the existing properties oblivious to pinch. I think this would be better for users since we wouldn't break legacy content under pinch-zoom. It would also be better for authors since it's more rational and and explicit.

Thoughts?

In the short term, I think we may need to revert https://src.chromium.org/viewvc/blink?revision=193307&view=revision and make getBoundingClientRect relative to visual viewport again. It seems to be a common pattern to popup an absolutely positioned menu over some button by getting the button's client rect and offsetting that by scrollX/Y. The first site I hit when checking how common this might be (the gear button on nytimes.com) also has this problem.

Comment 5 by rbyers@chromium.org, May 22 2015

I was happiest in the original plan to have all APIs reflect the layout viewport (and introduce new APIs for visual).  I agree that pinch-zoom is primarily for legacy sites not designed for touch, but I don't think we want to restrict it to that.  There is a good argument to say there has to be SOME way to get details of the visual viewport.  Perhaps we really can't reach that ideal of being fully transparent without also adding some new APIs?

But we've got to stop churning our behavior on stable channel here.  Current stable M-43 builds behave the same as ToT / 44, and the same as IE, right?  Perhaps we can afford to leave it like this for now and work on a long term solution?

In particular, we need that doc that lists all the relevant APIs and what co-ordinate space their in, discussion with IE to confirm our implementations are aligned, and then a standardization effort.  I'm a little worried that whatever changes we decide to make here, we'll end up changing again (and breaking things) when we finally standardize.

Comment 6 by bokan@chromium.org, May 22 2015

Right, I forgot we merged that back to 43. In that case, I agree we shouldn't keep churning the behavior. FWIW, I'm not aware of any pages on the web that do anything useful or special under pinch-zoom so I'm not sure we'd *need* to wait on new APIs (obviously though, this is anecdotal), but I don't think this is serious enough that we should push on this alone.

I've been punting on that doc for a while but I think it's a prereq for starting the discussion with IE so I'll prioritize that now.

Comment 7 by bokan@chromium.org, May 22 2015

Issue 484616 has been merged into this issue.

Comment 8 by bokan@chromium.org, May 22 2015

Labels: -M-44 -ReleaseBlock-Stable M-45
Summary: window.scroll properties being relative to virtual viewport break some pages under pinch-zoom (was: Regression: Unable to write any text in the overlay after performing pinch to zoom in 'Google Translate'.)

Comment 9 by bokan@chromium.org, May 27 2015

Labels: Hotlist-Input-Dev

Comment 10 by aelias@chromium.org, Jun 1 2015

I agree all the properties visible to the website today should be in terms of layout viewport.  Our original idea here was right.

Comment 11 by bokan@chromium.org, Jun 9 2015

Summary: window.scroll properties being relative to visual viewport break some pages under pinch-zoom (was: window.scroll properties being relative to virtual viewport break some pages under pinch-zoom)

Comment 12 by bokan@chromium.org, Jun 11 2015

Cc: jdduke@chromium.org
 Issue 496285  has been merged into this issue.

Comment 13 by bokan@chromium.org, Jun 12 2015

Labels: -M-45 M-46

Comment 14 by bokan@chromium.org, Jul 30 2015

Labels: -Pri-1 Pri-2

Comment 15 by bokan@chromium.org, Aug 17 2015

Labels: -M-46 M-47

Comment 16 by bokan@chromium.org, Sep 2 2015

Cc: bokan@chromium.org miguelg@chromium.org
 Issue 526432  has been merged into this issue.

Comment 17 by bokan@chromium.org, Sep 2 2015

Owner: ymalik@chromium.org

Comment 18 by bokan@chromium.org, Sep 16 2015

Cc: ajha@chromium.org
 Issue 525956  has been merged into this issue.

Comment 19 by cdr...@gmail.com, Sep 17 2015

FYI: Workaround to return absolute page coordinates using element.getBoundingClientRect() is to:

A) Add a <div id=pagetopelement style="position:absolute;left:0;top:0"> to the body.

B) var pageAbsoluteY = element.getBoundingClientRect().top - pagetopelement.getBoundingClientRect().top;

So window.scrollY or window.pageYOffset are not needed.

Comment 20 by bugdroid1@chromium.org, Sep 28 2015

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/9b92c13df0e3c771a89a5beb6ea892704fd2ed05

commit 9b92c13df0e3c771a89a5beb6ea892704fd2ed05
Author: ymalik <ymalik@chromium.org>
Date: Mon Sep 28 19:23:04 2015

Make window.scroll properties relative to the layout viewport.

window.scroll properties being relative to visual viewport breaks some pages
under pinch-zoom. The original plan was to have all APIs reflect the layout
viewport (and introduce new APIs for visual). This CL is an initial step
towards that and the window.scroll properties will be relative to the layout
viewport if the 'inert-visual-viewport' flag is set.

BUG= 489206 

Review URL: https://codereview.chromium.org/1366893002

Cr-Commit-Position: refs/heads/master@{#351104}

[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/chrome/app/generated_resources.grd
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/chrome/browser/about_flags.cc
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/content/browser/renderer_host/render_process_host_impl.cc
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/content/browser/renderer_host/render_view_host_impl.cc
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/content/public/common/common_param_traits_macros.h
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/content/public/common/content_switches.cc
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/content/public/common/content_switches.h
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/content/public/common/web_preferences.cc
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/content/public/common/web_preferences.h
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/content/renderer/render_view_impl.cc
[add] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/third_party/WebKit/LayoutTests/fast/scroll-behavior/main-frame-pinch-scrolls-layout-viewport-expected.txt
[add] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/third_party/WebKit/LayoutTests/fast/scroll-behavior/main-frame-pinch-scrolls-layout-viewport.html
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/third_party/WebKit/Source/core/frame/LocalDOMWindow.cpp
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/third_party/WebKit/Source/core/frame/Settings.in
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/third_party/WebKit/Source/web/WebSettingsImpl.cpp
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/third_party/WebKit/Source/web/WebSettingsImpl.h
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/third_party/WebKit/public/web/WebSettings.h
[modify] http://crrev.com/9b92c13df0e3c771a89a5beb6ea892704fd2ed05/tools/metrics/histograms/histograms.xml

Comment 21 by ymalik@chromium.org, Sep 30 2015

Cc: pdr@chromium.org hua...@chromium.org dsinclair@chromium.org joh...@chromium.org
 Issue 523966  has been merged into this issue.

Comment 22 by bokan@chromium.org, Oct 8 2015

 Issue 515199  has been merged into this issue.

Comment 23 by bugdroid1@chromium.org, Oct 14 2015

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/e81760ea8fd85cf9ae2900e3978dd600bbb3c8e0

commit e81760ea8fd85cf9ae2900e3978dd600bbb3c8e0
Author: ymalik <ymalik@chromium.org>
Date: Wed Oct 14 18:24:17 2015

Update telemetry tests that rely on window.innerWidth/Height.

window.scroll properties have been relative to the visual viewport. This breaks
some pages under pinch-zoom (see  crbug.com/489206 ). This CL fixes the telemetry
tests that would fail if window.scroll properties are changed to be relative
to the layout viewport. This CL adds an api method to get the visual viewport
size instead of getting it from window.innerWidth and window.innerHeight.

See  crbug.com/433794  for some history.

BUG= 489206 

Review URL: https://codereview.chromium.org/1400213002

Cr-Commit-Position: refs/heads/master@{#354071}

[modify] http://crrev.com/e81760ea8fd85cf9ae2900e3978dd600bbb3c8e0/content/renderer/gpu/gpu_benchmarking_extension.cc
[modify] http://crrev.com/e81760ea8fd85cf9ae2900e3978dd600bbb3c8e0/content/renderer/gpu/gpu_benchmarking_extension.h
[modify] http://crrev.com/e81760ea8fd85cf9ae2900e3978dd600bbb3c8e0/third_party/WebKit/Source/web/WebViewImpl.cpp
[modify] http://crrev.com/e81760ea8fd85cf9ae2900e3978dd600bbb3c8e0/third_party/WebKit/Source/web/WebViewImpl.h
[modify] http://crrev.com/e81760ea8fd85cf9ae2900e3978dd600bbb3c8e0/third_party/WebKit/public/web/WebView.h
[modify] http://crrev.com/e81760ea8fd85cf9ae2900e3978dd600bbb3c8e0/tools/telemetry/telemetry/internal/actions/gesture_common.js

Comment 24 by bokan@chromium.org, Oct 19 2015

 Issue 543474  has been merged into this issue.

Comment 25 by bugdroid1@chromium.org, Oct 23 2015

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/58d42ae1d6690a9f625e23f160b346e9cebeab01

commit 58d42ae1d6690a9f625e23f160b346e9cebeab01
Author: ymalik <ymalik@chromium.org>
Date: Fri Oct 23 22:30:27 2015

Remove plumbing for the inert-visual-viewport flag.

Note that the Blink setting inertVisualViewport still exists and is set to false by default.
A follow up CL will set this to true once dependent tests are fixed.

BUG= 489206 

Review URL: https://codereview.chromium.org/1415513002

Cr-Commit-Position: refs/heads/master@{#355907}

[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/chrome/app/generated_resources.grd
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/chrome/browser/about_flags.cc
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/components/html_viewer/blink_settings_impl.cc
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/components/html_viewer/web_preferences.cc
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/components/html_viewer/web_preferences.h
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/content/browser/renderer_host/render_process_host_impl.cc
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/content/browser/renderer_host/render_view_host_impl.cc
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/content/public/common/common_param_traits_macros.h
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/content/public/common/content_switches.cc
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/content/public/common/content_switches.h
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/content/public/common/web_preferences.cc
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/content/public/common/web_preferences.h
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/content/renderer/render_view_impl.cc
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/third_party/WebKit/Source/web/WebSettingsImpl.cpp
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/third_party/WebKit/Source/web/WebSettingsImpl.h
[modify] http://crrev.com/58d42ae1d6690a9f625e23f160b346e9cebeab01/third_party/WebKit/public/web/WebSettings.h

Comment 26 by bugdroid1@chromium.org, Oct 23 2015

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/8e61efca851565188257eb9f547d601f8d90e938

commit 8e61efca851565188257eb9f547d601f8d90e938
Author: ymalik <ymalik@chromium.org>
Date: Fri Oct 23 23:44:37 2015

Update layout tests to use inernals.visualViewport APIs.

This CL adds the following methods to Internals.cpp for tests that need the
visual viewport scroll position and dimensions: visualViewportHeight,
visualViewportWidth, visualViewportScrollX, visualViewportScrollY.

This is the initial CL to fix the LayoutTests that would break if the
corresponding window properties were relative to the visual viewport. This CL
branched from another CL to make shipping this window API change easier.

Original review CL: https://codereview.chromium.org/1415513002

TBR=rbyers@chromium.org

BUG= 489206 

Review URL: https://codereview.chromium.org/1424593002

Cr-Commit-Position: refs/heads/master@{#355926}

[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/events/gesture-pinch-zoom-expected.txt
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/events/gesture-pinch-zoom-scroll-bubble-expected.txt
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/events/gesture-pinch-zoom-scroll-bubble.html
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/events/gesture-pinch-zoom.html
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/events/scroll-in-scaled-page-with-overflow-hidden-expected.txt
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/events/scroll-in-scaled-page-with-overflow-hidden.html
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/events/touch/gesture/touch-gesture-fling-with-page-scale-expected.txt
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/events/touch/gesture/touch-gesture-fling-with-page-scale.html
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/history/scroll-restoration/scroll-restoration-scale-not-impacted.html
[delete] http://crrev.com/9c33d121fa4757213064a2653404dd66ea40c388/third_party/WebKit/LayoutTests/fast/scroll-behavior/main-frame-pinch-scrollBy-expected.txt
[delete] http://crrev.com/9c33d121fa4757213064a2653404dd66ea40c388/third_party/WebKit/LayoutTests/fast/scroll-behavior/main-frame-pinch-scrollBy.html
[delete] http://crrev.com/9c33d121fa4757213064a2653404dd66ea40c388/third_party/WebKit/LayoutTests/fast/scroll-behavior/main-frame-pinch-scrollTo-expected.txt
[delete] http://crrev.com/9c33d121fa4757213064a2653404dd66ea40c388/third_party/WebKit/LayoutTests/fast/scroll-behavior/main-frame-pinch-scrollTo.html
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/scrolling/editor-command-scroll-page-scale-expected.txt
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/scrolling/editor-command-scroll-page-scale.html
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/scrolling/keyboard-scroll-page-scale-expected.txt
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/scrolling/keyboard-scroll-page-scale.html
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/fast/transforms/selection-bounds-in-transformed-view.html
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/LayoutTests/inspector/elements/highlight/highlight-node-scaled-and-scrolled.html
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/Source/core/testing/Internals.cpp
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/Source/core/testing/Internals.h
[modify] http://crrev.com/8e61efca851565188257eb9f547d601f8d90e938/third_party/WebKit/Source/core/testing/Internals.idl

Comment 27 by bugdroid1@chromium.org, Nov 2 2015

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c0690e564718ae01d7afa37c66886a4cd199fc69

commit c0690e564718ae01d7afa37c66886a4cd199fc69
Author: ymalik <ymalik@chromium.org>
Date: Mon Nov 02 16:11:52 2015

element.scrollIntoView only scrolls the layout viewport

window.scroll properties being relative to visual viewport breaks some pages
under pinch-zoom. The plan is to have all APIs reflect the layout viewport.

Note that this CL also affects element.scrollIntoViewIfNeeded.

BUG= 489206 

Review URL: https://codereview.chromium.org/1424313003

Cr-Commit-Position: refs/heads/master@{#357361}

[add] http://crrev.com/c0690e564718ae01d7afa37c66886a4cd199fc69/third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-into-view-scrolls-layout-viewport-expected.txt
[add] http://crrev.com/c0690e564718ae01d7afa37c66886a4cd199fc69/third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-into-view-scrolls-layout-viewport.html
[modify] http://crrev.com/c0690e564718ae01d7afa37c66886a4cd199fc69/third_party/WebKit/Source/core/dom/Element.cpp
[modify] http://crrev.com/c0690e564718ae01d7afa37c66886a4cd199fc69/third_party/WebKit/Source/core/layout/LayoutBox.cpp
[modify] http://crrev.com/c0690e564718ae01d7afa37c66886a4cd199fc69/third_party/WebKit/Source/core/layout/LayoutBox.h
[modify] http://crrev.com/c0690e564718ae01d7afa37c66886a4cd199fc69/third_party/WebKit/Source/core/layout/LayoutObject.cpp
[modify] http://crrev.com/c0690e564718ae01d7afa37c66886a4cd199fc69/third_party/WebKit/Source/core/layout/LayoutObject.h

Comment 28 by bugdroid1@chromium.org, Nov 5 2015

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b4aaa1da24bbd70c05694837a110a45147fa5c16

commit b4aaa1da24bbd70c05694837a110a45147fa5c16
Author: ymalik <ymalik@chromium.org>
Date: Wed Nov 04 20:37:51 2015

Use inert-visual-viewport flag correctly.

With the inert-visual-viewport flag set, window.scrollBy and window.scrollTo
should only scroll the layout viewport. Found a logic error where we don't
check this flag before calculating current offset.

This CL also updates the visual viewport to only fire scroll event when the
inert-visual-viewport flag is off.

BUG= 489206 

Review URL: https://codereview.chromium.org/1419143007

Cr-Commit-Position: refs/heads/master@{#357887}

[modify] http://crrev.com/b4aaa1da24bbd70c05694837a110a45147fa5c16/third_party/WebKit/Source/core/frame/LocalDOMWindow.cpp
[modify] http://crrev.com/b4aaa1da24bbd70c05694837a110a45147fa5c16/third_party/WebKit/Source/core/frame/VisualViewport.cpp

Comment 29 by bugdroid1@chromium.org, Nov 5 2015

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f75faf53de4a5c59269143b6edbfc6dc40c7fb33

commit f75faf53de4a5c59269143b6edbfc6dc40c7fb33
Author: ymalik <ymalik@chromium.org>
Date: Thu Nov 05 20:15:46 2015

Make window.scroll properties relative to the layout viewport by default.

This CL sets the inert-visual-viewport flag to true by default. The following
APIs in the CSSOM spec are affected: scrollTo, scrollBy, innerWidth,
innerHeight, scrollX, scrollY, element.scrollTop, element.scrollLeft,
element.scrollIntoView.

Intent-to-ship:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/mt1uciFuvWQ/ecQi0f8kCQAJ

BUG= 489206 

Review URL: https://codereview.chromium.org/1416283006

Cr-Commit-Position: refs/heads/master@{#358117}

[modify] http://crrev.com/f75faf53de4a5c59269143b6edbfc6dc40c7fb33/content/public/android/javatests/src/org/chromium/content/browser/input/ImeTest.java
[modify] http://crrev.com/f75faf53de4a5c59269143b6edbfc6dc40c7fb33/third_party/WebKit/LayoutTests/fast/dom/Window/window-scaled-viewport-properties-expected.txt
[modify] http://crrev.com/f75faf53de4a5c59269143b6edbfc6dc40c7fb33/third_party/WebKit/LayoutTests/fast/dom/Window/window-scaled-viewport-properties.html
[delete] http://crrev.com/19da952f29e08aea0353513c1e36f2163d14c5ce/third_party/WebKit/LayoutTests/fast/dom/window-inner-size-scaling-expected.txt
[delete] http://crrev.com/19da952f29e08aea0353513c1e36f2163d14c5ce/third_party/WebKit/LayoutTests/fast/dom/window-inner-size-scaling.html
[modify] http://crrev.com/f75faf53de4a5c59269143b6edbfc6dc40c7fb33/third_party/WebKit/LayoutTests/fast/repaint/fixed-right-bottom-in-page-scale.html
[add] http://crrev.com/f75faf53de4a5c59269143b6edbfc6dc40c7fb33/third_party/WebKit/LayoutTests/fast/scroll-behavior/visual-viewport-scroll-no-onscroll-event-expected.txt
[add] http://crrev.com/f75faf53de4a5c59269143b6edbfc6dc40c7fb33/third_party/WebKit/LayoutTests/fast/scroll-behavior/visual-viewport-scroll-no-onscroll-event.html
[modify] http://crrev.com/f75faf53de4a5c59269143b6edbfc6dc40c7fb33/third_party/WebKit/Source/core/frame/Settings.in
[modify] http://crrev.com/f75faf53de4a5c59269143b6edbfc6dc40c7fb33/third_party/WebKit/Source/web/tests/VisualViewportTest.cpp

Comment 30 by ymalik@chromium.org, Nov 10 2015

Cc: e...@chromium.org tedc...@chromium.org
 Issue 547859  has been merged into this issue.

Comment 31 by bokan@chromium.org, Nov 23 2015

Cc: tbuck...@chromium.org
 Issue 515120  has been merged into this issue.

Comment 32 by jsc...@chromium.org, Nov 30 2015

Labels: Cr-Internals-PlatformIntegration

Comment 33 by rbyers@chromium.org, Jan 6 2016

Labels: -M-47 M-48
Status: Fixed
Shipped in M48

Comment 35 by anthonyo...@gmail.com, Jan 7 2016

I think this change is misguided. window.innerWidth and innerHeight *are* changed on zoom. Try this:

<button onclick="alert(window.innerWidth);">test</button>

...now open this in desktop Chrome or any browser, click "test", note the value. Zoom the page in and try again. The value changes as the inner dims absolutely do change on zoom.

Zoom should absolutely be visible to web pages/apps. This is the way it has always worked in Android WebView and it is the way it still works in all rendering engines on mobile, desktop, or otherwise.

What if I want a button to hover in the top right corner of the screen? How can I get the viewport inner dims now?

This new change just sets window.innerWidth = screen.width, so:
1) why bother having 2 variables if they are always the same?
2) how to get the viewport inner dimensions now?

Comment 36 by bokan@chromium.org, Jan 7 2016

Comment 37 by bokan@chromium.org, Feb 2 2016

 Issue 515114  has been merged into this issue.

Comment 38 by bokan@chromium.org, Feb 24 2016

Status: Started (was: Fixed)
Reopening this due to the revert in  issue 571297 

Comment 39 by dtapu...@chromium.org, Feb 26 2016

Components: -Blink Blink>Scroll

Comment 40 by bokan@chromium.org, Apr 29 2016

Blocking: 476438

Comment 41 by bokan@chromium.org, May 31 2016

Issue 612441 has been merged into this issue.

Comment 42 by onlinech...@gmail.com, Jul 8 2016

Can someone please comment on the status of this bug? My understanding is that it was fixed but then the fix was reverted for some reason? Will it ever be fixed? It appears to still be an issue (just checked with Chrome 51). Even jQuery reports an incorrect position() under pinch-zoom. Enabling "inert visual viewport" flag fixes it.

Any suggested workarounds in the meantime? How can a div with "position: absolute" be placed dynamically on top of another div? Since
new.style.left = (old.getBoundingClientRect().left + window.pageXOffset) + 'px';
new.style.top = (old.getBoundingClientRect().top + window.pageYOffset) + 'px';
does not work due to this bug (under pinch-zoom).

Any way to "translate" window.pageXOffset/pageYOffset into the same coordinate system as getBoundingClientRect()?

Comment 43 by bokan@chromium.org, Jul 11 2016

We still plan on fixing this but using the inert-visual-viewport flag means that there's no way to tell the viewport properties when zoomed in so we have to add a new API before we can do that. The new API is tracked in  issue 595826 . Unfortunately, shipping an API is a bit unpredictable in terms of timelines and we'll have to wait a release or two after that in the best of cases so this isn't a short term timeline.

You should be able to work around this for now. getBoundingClientRect is relative to the layout viewport (see http://bokan.ca/viewport/index.html) while window.pageX/YOffset are the coordinates of the visual viewport. What you really want then is to add the layout viewport offset to the bounding client rect location (setting inert-visual-viewport makes window.pageX/YOffset the location of the layout viewport). The only way I know to do that today is to add a `position: absolute; left: 0px; top: 0px; visibility: hidden` element to your page and use getBoundingClientRect to get the negative layout viewport position. i.e.:

<div id="dummyElement" style="position: absolute; left: 0px; top: 0px; width: 1px; height: 1px; visibility: hidden"></div>

new.style.left = (old.getBoundingClientRect().left - dummyElement.getBoundingClientRect().left) + 'px';
new.style.top = (old.getBoundingClientRect().top - dummyElement.getBoundingClientRect().top) + 'px';

It's definitely hacky but the good news is that this should work across browsers (its been a while since I tried on Safari but I *think* it should work).

Comment 44 by bokan@chromium.org, Jul 11 2016

Labels: -Pri-2 Pri-3

Comment 45 by cro...@gmail.com, Jul 29 2016

Can we please put this back as a Pri2, at least? This causes huge headaches doing any mobile development and the workaround suggested by bokan@ doesn't solve the problem if one isn't trying to position something new.

Comment 46 by bokan@chromium.org, Jul 29 2016

We've recently changed the meaning of our priorities; pri-2 means "this milestone" which is we definitely can't do for this bug, but we're actively working on this.

We're blocked on shipping the visual viewport API as a prerequisite. The implementation is mostly finished so we hope to have that shipped soon. Once it does, this can be "refixed" but unfortunately I can't give any specific timelines as these things are often uncertain.

Comment 47 by r...@jwplayer.com, Sep 27 2016

This bug impacts our video player on Android Chrome 53. When zoomed in to the viewport it's not possible for us to determine the touch location where the user is attempting scrub within the timeslider. We compare touch.pageX to element.getBoundingClientRect().left + pageXOffset (or scrollX). Works in Chrome desktop, iOS Safari, etc...

Comment 48 by diosla...@gmail.com, Oct 11 2016

@r...@jwplayer.com: I had the same issue with a javascript slider. Use touch.clientX and element.getBoundingClientRect().left (without pageXOffset) to get consistent results with and without zoom

Comment 49 by ymalik@chromium.org, Nov 15 2016

Cc: ymalik@chromium.org
Owner: bokan@chromium.org
Status: Assigned (was: Started)

Comment 50 by cro...@gmail.com, Nov 15 2016

It's been about 16 weeks since an update on this -- we continue to struggle against this all over our mobile app. Any news?

Comment 51 by bokan@chromium.org, Nov 15 2016

Labels: -OS-Windows -M-48 M-57 OS-All
Unfortunately not, I'm planning to look back into this for M57.

I'm not sure what you mean that the "workaround" doesn't solve your problem. Enough information is exposed that you can transform coordinates into any desired space. FWIW, Edge uses the same model so it's not just Chrome that will be broken on your page.

Comment 52 by cro...@gmail.com, Nov 16 2016

Huh, we were not aware of Edge but confirm that it does have the same issue.

Re: the suggested workaround, it requires you to place something in the DOM and display it before adjusting the coordinates. Also, it's inelegant :(

Thanks for having a look. We're really bummed by the browser-specific code necessary here. Looking forward to this particular headache being gone.

Comment 53 by r...@jwplayer.com, Nov 22 2016

Thanks for the workaround suggestion. Unfortunately I can't use it. Because jwplayer is operating on thousands of websites we opt to only add elements to the page within the video player's container with relative coordinates.

Until a fix comes to Android Chrome, I've put a workaround in for our seek bar. The impact to scrubbing through video is very apparent when the left edge of the page is far from the left edge of the viewport.

https://github.com/jwplayer/jwplayer/pull/1566

Comment 54 by bokan@chromium.org, Mar 2 2017

Triage update, this is still and issue as of Chrome 58. Safari is moving to Chrome/Edge's viewport model and I was hoping we could use that opportunity to agree with them on something but haven't been able to get any response. We'll have to wait and see what they end up shipping.

Comment 55 by rbyers@chromium.org, Apr 19 2017

Blockedon: 635031
WebKit is planning on changing to follow the "inert visual viewport" model: https://bugs.webkit.org/show_bug.cgi?id=170981

IMHO we should move forward with shipping the VisualViewport API ( issue 635031 ) and then enabling inert by default.

Comment 56 by bokan@chromium.org, Apr 24 2017

Cc: ranjitkan@chromium.org brajkumar@chromium.org
 Issue 712036  has been merged into this issue.

Comment 57 by bokan@chromium.org, Jun 8 2017

Cc: krajshree@chromium.org
Issue 728458 has been merged into this issue.

Comment 58 by bugdroid1@chromium.org, Jun 27 2017

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c629c15fcdf08a41808a82cd9dbab6aa0d0748a0

commit c629c15fcdf08a41808a82cd9dbab6aa0d0748a0
Author: David Bokan <bokan@chromium.org>
Date: Tue Jun 27 03:15:43 2017

Enable inert visual viewport

Inert visual viewport is a mode in Blink that makes the visual
viewport invisible to the page in most ways. That is, pinch-zooming
in and panning the visual viewport around doesn't affect window's
innerWidth/innerHeight, scrollX/scrollY properties. It also makes
scroll methods like scrollIntoView work on the layout viewport.

For all intents and purposes, the web page behaves as if the browser
is fully zoomed out at all times.

Intent-to-Ship:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/kbcFPnvDwUc/P2PLzcGhBAAJ

Bug:  489206 
Change-Id: Ic115960dc71df9bf5885e7bfe42692cbab01704b
Reviewed-on: https://chromium-review.googlesource.com/545143
Commit-Queue: David Bokan <bokan@chromium.org>
Reviewed-by: Dave Tapuska <dtapuska@chromium.org>
Cr-Commit-Position: refs/heads/master@{#482525}
[modify] https://crrev.com/c629c15fcdf08a41808a82cd9dbab6aa0d0748a0/third_party/WebKit/Source/core/frame/Settings.json5
[modify] https://crrev.com/c629c15fcdf08a41808a82cd9dbab6aa0d0748a0/third_party/WebKit/Source/core/frame/VisualViewportTest.cpp

Comment 59 by bokan@chromium.org, Jun 28 2017

Labels: -M-57 M-61
Status: Fixed (was: Assigned)
This is now fixed in ToT and should hit stable in M61.

Comment 60 by rbyers@chromium.org, Jul 11 2017

Blocking: 571297

Comment 61 by rbyers@chromium.org, Jul 11 2017

Blocking: 740956

Comment 62 by bokan@chromium.org, Jul 27 2017

Cc: kavvaru@chromium.org erikc...@chromium.org
 Issue 746322  has been merged into this issue.

Comment 63 by bugdroid1@chromium.org, Oct 24 2017

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8

commit 4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8
Author: Philip Rogers <pdr@chromium.org>
Date: Tue Oct 24 19:29:40 2017

Remove inert visual viewport setting

The inert visual viewport feature has shipped so we can remove
this setting. This will make it easier to develop features such
as root layer scrolling.

Bug:  489206 ,  774711 
Change-Id: Ia007c0712eda14b658cfbe7a90402c0a45c305b7
Reviewed-on: https://chromium-review.googlesource.com/733800
Commit-Queue: Philip Rogers <pdr@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Reviewed-by: Justin Novosad <junov@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Reviewed-by: David Bokan <bokan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#511233}
[modify] https://crrev.com/4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8/chrome/browser/flag_descriptions.cc
[modify] https://crrev.com/4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8/chrome/browser/flag_descriptions.h
[modify] https://crrev.com/4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8/third_party/WebKit/LayoutTests/fast/scroll-behavior/main-frame-pinch-scrolls-layout-viewport.html
[modify] https://crrev.com/4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8/third_party/WebKit/LayoutTests/fast/scroll-behavior/scroll-into-view-scrolls-layout-viewport.html
[modify] https://crrev.com/4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8/third_party/WebKit/Source/core/dom/Element.cpp
[modify] https://crrev.com/4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8/third_party/WebKit/Source/core/frame/LocalDOMWindow.cpp
[modify] https://crrev.com/4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8/third_party/WebKit/Source/core/frame/Settings.json5
[modify] https://crrev.com/4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8/third_party/WebKit/Source/core/frame/VisualViewport.cpp
[modify] https://crrev.com/4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8/third_party/WebKit/Source/modules/accessibility/AXObject.cpp
[modify] https://crrev.com/4380beb4e7b1f9339e86c5ad1e41b5ae87ba52c8/third_party/WebKit/Source/modules/canvas/canvas2d/CanvasRenderingContext2D.cpp

Sign in to add a comment