Bug 171113

Summary: Incorrect position when dragging jQuery Draggable elements with position fixed after pinch zoom
Product: WebKit Reporter: Zach <zach.peters>
Component: DOMAssignee: Simon Fraser (smfr) <simon.fraser>
Status: REOPENED    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, buildbot, cdumez, cmarcelo, dbates, esprehn+autocc, kangil.han, manian, rniwa, simon.fraser, smh, thorton, tzagallo, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 10   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 170981    
Attachments:
Description Flags
The zip file contains an example html page along with jQuery touch punch for testing on mobile devices.
none
Patch
none
Archive of layout-test-results from ews105 for mac-elcapitan-wk2
none
Archive of layout-test-results from ews112 for mac-elcapitan
none
Archive of layout-test-results from ews121 for ios-simulator-wk2
none
Archive of layout-test-results from ews100 for mac-elcapitan
none
Patch thorton: review+

Zach
Reported 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.
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
DetailsFormatted DiffDiff
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+
DetailsFormatted DiffDiff
Show Obsolete (6) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2017-04-24 16:45:40 PDT
<rdar://problem/31800450>
Simon Fraser (smfr)
Comment 2 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.
Simon Fraser (smfr)
Comment 3 2017-05-08 19:14:19 PDT
See also bug 170981.
Simon Fraser (smfr)
Comment 4 2017-05-11 21:42:41 PDT
Created attachment 309863 [details] Patch
Build Bot
Comment 5 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
Build Bot
Comment 6 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
Build Bot
Comment 7 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
Build Bot
Comment 8 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
Build Bot
Comment 9 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
Build Bot
Comment 10 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
Build Bot
Comment 11 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
Build Bot
Comment 12 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
Simon Fraser (smfr)
Comment 13 2017-05-12 14:01:06 PDT
Created attachment 309941 [details] Patch
Simon Fraser (smfr)
Comment 14 2017-05-12 16:48:56 PDT
https://trac.webkit.org/r216803
Zach
Comment 15 2017-06-16 09:02:05 PDT
Which version of WebKit has this issue been fixed in? Thank you
Simon Fraser (smfr)
Comment 16 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.
Simon Fraser (smfr)
Comment 17 2017-07-21 16:22:24 PDT
Reverting this via bug 174734, for now. We'll try again soon.
Zach
Comment 18 2018-04-19 11:42:41 PDT
Could this issue be marked as "Reopened" since the fix was reverted?
Daniel Bates
Comment 19 2018-04-19 17:37:03 PDT
Re-opened per comment 17 and comment 18.
Ahmad Saleem
Comment 20 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!
Note You need to log in before you can comment on or make changes to this bug.