Bug 171113 – Incorrect position when dragging jQuery Draggable elements with position fixed after pinch zoom

• Status: REOPENED
• Component: DOM

[Zach]

Created attachment 307730 [details]
The zip file contains an example html page along with jQuery touch punch for testing on mobile devices.

After doing a pinch zoom if you try to drag a jQuery Draggable element with the style position fixed then the element jumps before beginning to drag. I've attached an example html page that can be used to reproduce this. This issue happens on normal Safari browser as well as inside an iOS app using Webkit.

NOTE: After you pinch zoom you need to make sure the viewport is not in the top left corner of the document. As you move the viewport further to the bottom right of the document the "jump" before dragging becomes larger and larger.

[Radar WebKit Bug Importer]

<rdar://problem/31800450>

[Simon Fraser (smfr)]

This is probably related to visual viewports and screenX/screenY or clientX/clientY coordinates. Also reproduces on macOS. Chrome has correct behavior.

[Simon Fraser (smfr)]

See also bug 170981.

[Simon Fraser (smfr)]

Created attachment 309863 [details]
Patch

[Build Bot]

Comment on attachment 309863 [details]
Patch

Attachment 309863 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.webkit.org/results/3723938

New failing tests:
svg/zoom/page/zoom-zoom-coords.xhtml
svg/zoom/page/zoom-getBoundingClientRect.xhtml

[Build Bot]

Created attachment 309872 [details]
Archive of layout-test-results from ews105 for mac-elcapitan-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews105  Port: mac-elcapitan-wk2  Platform: Mac OS X 10.11.6

[Build Bot]

Comment on attachment 309863 [details]
Patch

Attachment 309863 [details] did not pass mac-debug-ews (mac):
Output: http://webkit-queues.webkit.org/results/3723951

New failing tests:
svg/zoom/page/zoom-zoom-coords.xhtml
svg/zoom/page/zoom-getBoundingClientRect.xhtml

[Build Bot]

Created attachment 309873 [details]
Archive of layout-test-results from ews112 for mac-elcapitan

The attached test failures were seen while running run-webkit-tests on the mac-debug-ews.
Bot: ews112  Port: mac-elcapitan  Platform: Mac OS X 10.11.6

[Build Bot]

Comment on attachment 309863 [details]
Patch

Attachment 309863 [details] did not pass ios-sim-ews (ios-simulator-wk2):
Output: http://webkit-queues.webkit.org/results/3723947

New failing tests:
imported/w3c/web-platform-tests/cssom-view/elementFromPoint.html
svg/zoom/page/zoom-getBoundingClientRect.xhtml

[Build Bot]

Created attachment 309874 [details]
Archive of layout-test-results from ews121 for ios-simulator-wk2

The attached test failures were seen while running run-webkit-tests on the ios-sim-ews.
Bot: ews121  Port: ios-simulator-wk2  Platform: Mac OS X 10.11.6

[Build Bot]

Comment on attachment 309863 [details]
Patch

Attachment 309863 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.webkit.org/results/3725174

New failing tests:
svg/zoom/page/zoom-zoom-coords.xhtml
svg/zoom/page/zoom-getBoundingClientRect.xhtml

[Build Bot]

Created attachment 309887 [details]
Archive of layout-test-results from ews100 for mac-elcapitan

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: ews100  Port: mac-elcapitan  Platform: Mac OS X 10.11.6

[Simon Fraser (smfr)]

Created attachment 309941 [details]
Patch

[Simon Fraser (smfr)]

https://trac.webkit.org/r216803

[Zach]

Which version of WebKit has this issue been fixed in?
Thank you

[Simon Fraser (smfr)]

You can test this fix in recent versions of Safari Tech Preview, and in macOS High Sierra and iOS 11 seed builds.

[Simon Fraser (smfr)]

Reverting this via bug 174734, for now. We'll try again soon.

[Zach]

Could this issue be marked as "Reopened" since the fix was reverted?

[Daniel Bates]

Re-opened per comment 17 and comment 18.

[Ahmad Saleem]

I took a test case from the patch and changed them into JSFiddle:

Test Case - client-rects-with-css-and-page-zoom.html - https://jsfiddle.net/abzf8pgm/show

*** Safari Technology Preview 151 ***

PASS successfullyParsed is true

TEST COMPLETE
This tests uses eventSender to zoom in twice

Testing box with CSS zoom on an ancestor
PASS bounds.left.toFixed(2) is "18.00"
PASS bounds.top.toFixed(2) is "150.00"
PASS bounds.width.toFixed(2) is "40.00"
PASS bounds.height.toFixed(2) is "50.00"

Testing box without CSS zoom on an ancestor
PASS bounds.left.toFixed(2) is "21.00"
PASS bounds.top.toFixed(2) is "150.00"
PASS bounds.width.toFixed(2) is "40.00"
PASS bounds.height.toFixed(2) is "50.00"

*** Chrome Canary 106 ***

PASS successfullyParsed is true

TEST COMPLETE
This tests uses eventSender to zoom in twice

Testing box with CSS zoom on an ancestor
PASS bounds.left.toFixed(2) is "18.00"
PASS bounds.top.toFixed(2) is "150.00"
PASS bounds.width.toFixed(2) is "40.00"
PASS bounds.height.toFixed(2) is "50.00"

Testing box without CSS zoom on an ancestor
PASS bounds.left.toFixed(2) is "21.00"
PASS bounds.top.toFixed(2) is "150.00"
PASS bounds.width.toFixed(2) is "40.00"
PASS bounds.height.toFixed(2) is "50.00"

*** Firefox Nightly 105 ***

PASS successfullyParsed is true

TEST COMPLETE
This tests uses eventSender to zoom in twice

Testing box with CSS zoom on an ancestor
PASS bounds.left.toFixed(2) is "18.00"
PASS bounds.top.toFixed(2) is "150.00"
PASS bounds.width.toFixed(2) is "40.00"
PASS bounds.height.toFixed(2) is "50.00"

Testing box without CSS zoom on an ancestor
PASS bounds.left.toFixed(2) is "21.00"
PASS bounds.top.toFixed(2) is "150.00"
PASS bounds.width.toFixed(2) is "40.00"
PASS bounds.height.toFixed(2) is "50.00"

_____

All browsers are matching on the test case from the patch, just wanted to update latest results.

Appreciate if someone can confirm whether this is still needed or this is addressed already? Thanks!

Thanks!