Bug 171113 - Incorrect position when dragging jQuery Draggable elements with position fixed after pinch zoom
Summary: Incorrect position when dragging jQuery Draggable elements with position fixe...
Status: REOPENED
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: Safari 10
Hardware: All All
: P2 Normal
Assignee: Simon Fraser (smfr)
URL:
Keywords: InRadar
Depends on:
Blocks: 170981
  Show dependency treegraph
 
Reported: 2017-04-21 08:10 PDT by Zach
Modified: 2022-08-19 08:56 PDT (History)
16 users (show)

See Also:


Attachments
The zip file contains an example html page along with jQuery touch punch for testing on mobile devices. (2.15 KB, application/zip)
2017-04-21 08:10 PDT, Zach
no flags Details
Patch (44.35 KB, patch)
2017-05-11 21:42 PDT, Simon Fraser (smfr)
no flags Details | Formatted Diff | Diff
Archive of layout-test-results from ews105 for mac-elcapitan-wk2 (911.06 KB, application/zip)
2017-05-11 23:03 PDT, Build Bot
no flags Details
Archive of layout-test-results from ews112 for mac-elcapitan (1.74 MB, application/zip)
2017-05-11 23:17 PDT, Build Bot
no flags Details
Archive of layout-test-results from ews121 for ios-simulator-wk2 (753.25 KB, application/zip)
2017-05-11 23:27 PDT, Build Bot
no flags Details
Archive of layout-test-results from ews100 for mac-elcapitan (975.80 KB, application/zip)
2017-05-12 03:47 PDT, Build Bot
no flags Details
Patch (49.27 KB, patch)
2017-05-12 14:01 PDT, Simon Fraser (smfr)
thorton: review+
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Zach 2017-04-21 08:10:20 PDT
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.
Comment 1 Radar WebKit Bug Importer 2017-04-24 16:45:40 PDT
<rdar://problem/31800450>
Comment 2 Simon Fraser (smfr) 2017-04-25 08:38:01 PDT
This is probably related to visual viewports and screenX/screenY or clientX/clientY coordinates. Also reproduces on macOS. Chrome has correct behavior.
Comment 3 Simon Fraser (smfr) 2017-05-08 19:14:19 PDT
See also bug 170981.
Comment 4 Simon Fraser (smfr) 2017-05-11 21:42:41 PDT
Created attachment 309863 [details]
Patch
Comment 5 Build Bot 2017-05-11 23:03:36 PDT
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
Comment 6 Build Bot 2017-05-11 23:03:37 PDT
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
Comment 7 Build Bot 2017-05-11 23:17:26 PDT
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
Comment 8 Build Bot 2017-05-11 23:17:30 PDT
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
Comment 9 Build Bot 2017-05-11 23:27:52 PDT
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
Comment 10 Build Bot 2017-05-11 23:27:54 PDT
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
Comment 11 Build Bot 2017-05-12 03:47:40 PDT
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
Comment 12 Build Bot 2017-05-12 03:47:41 PDT
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
Comment 13 Simon Fraser (smfr) 2017-05-12 14:01:06 PDT
Created attachment 309941 [details]
Patch
Comment 14 Simon Fraser (smfr) 2017-05-12 16:48:56 PDT
https://trac.webkit.org/r216803
Comment 15 Zach 2017-06-16 09:02:05 PDT
Which version of WebKit has this issue been fixed in?
Thank you
Comment 16 Simon Fraser (smfr) 2017-06-16 10:07:11 PDT
You can test this fix in recent versions of Safari Tech Preview, and in macOS High Sierra and iOS 11 seed builds.
Comment 17 Simon Fraser (smfr) 2017-07-21 16:22:24 PDT
Reverting this via bug 174734, for now. We'll try again soon.
Comment 18 Zach 2018-04-19 11:42:41 PDT
Could this issue be marked as "Reopened" since the fix was reverted?
Comment 19 Daniel Bates 2018-04-19 17:37:03 PDT
Re-opened per comment 17 and comment 18.
Comment 20 Ahmad Saleem 2022-08-19 08:56:12 PDT
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!