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.
<rdar://problem/31800450>
This is probably related to visual viewports and screenX/screenY or clientX/clientY coordinates. Also reproduces on macOS. Chrome has correct behavior.
See also bug 170981.
Created attachment 309863 [details] Patch
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
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 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
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 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
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 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
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
Created attachment 309941 [details] Patch
https://trac.webkit.org/r216803
Which version of WebKit has this issue been fixed in? Thank you
You can test this fix in recent versions of Safari Tech Preview, and in macOS High Sierra and iOS 11 seed builds.
Reverting this via bug 174734, for now. We'll try again soon.
Could this issue be marked as "Reopened" since the fix was reverted?
Re-opened per comment 17 and comment 18.
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!