Iphone 4 dropzone displacement issue

[dobromir-hristov]

I have an issue with Iphone 4 and only it where when I scroll the page, the dropzone area (be it position:fixed or not) does not change its zone screen pixels so to speak.
Meaning: If i do not scroll, the drop place is where the html element is on the screen. But when I scroll the page the element moves up, but when dragged over, it does not register an event. If I try to imagine where the dropzone was on the screen before scroll, and I drag the element there, THEN it registers a dragover event.
I tried to recreate this on jsfiddle but without luck... I will continue to try so I can show what I mean.

[taye]

Try doing the following with your dropzone Interactable(s) and see if it helps:

interact(dropzoneSelector).rectChecker(function (element) {
  return element.getClientRects()[0];
});

[dobromir-hristov]

It did not. The Iphone does not call that function at all. I put an Alert in there and it didnt popout.
Edit: It was a cache issue. It is called quite often as I suspected, but the zone positions did not get fixed after doing so.

Edit 2:
Safari does not return X and Y when doing getClientRects()
Look:

bottom: 1117
constructor: ClientRectConstructor
height: 170
left: 533
right: 703
top: 947
width: 170
__proto__: ClientRectPrototype

Firefox:

bottom  1166
height  170
left    532.3499755859375
right   702.3499755859375
top 996
width 170
x 532.3499755859375
y 996
__proto__DOMRect {}

Edit 3:
After I did this, the problem occurred on desktop as well.
Edit 4:

function getElementRect (element) {
        var scroll = isIOS7orLower
                ? { x: 0, y: 0 }
                : getScrollXY(getWindow(element)),
            clientRect = (element instanceof SVGElement)?
                element.getBoundingClientRect():
                element.getClientRects()[0];

        return clientRect && {
            left  : clientRect.left   + scroll.x,
            right : clientRect.right  + scroll.x,
            top   : clientRect.top    + scroll.y,
            bottom: clientRect.bottom + scroll.y,
            width : clientRect.width || clientRect.right - clientRect.left,
            height: clientRect.heigh || clientRect.bottom - clientRect.top
        };
    }

According to this, if IOS is lower or equal to 7 X and Y scrolls are 0, thats why when my dropzone is position:fixed I get displaced zones.

[dobromir-hristov]

So removing the isIOS7orLower check and getting Scroll values fixed the issue.

 interact('.zone').rectChecker(function (element) {
                    var scroll = {
                            x: window.scrollX || window.document.documentElement.scrollLeft,
                            y: window.scrollY || window.document.documentElement.scrollTop
                        },
                        clientRect = (element instanceof SVGElement)?
                            element.getBoundingClientRect():
                            element.getClientRects()[0];

                    return clientRect && {
                            left  : clientRect.left   + scroll.x,
                            right : clientRect.right  + scroll.x,
                            top   : clientRect.top    + scroll.y,
                            bottom: clientRect.bottom + scroll.y,
                            width : clientRect.width || clientRect.right - clientRect.left,
                            height: clientRect.heigh || clientRect.bottom - clientRect.top
                        };
                });

I had to copy the whole function from the source because I dont want to mess with the core of the plugin.
Ofcourse this is not a good idea, because like this, I miss the getWindow() function but it gets the job done.

-Edit: And this broke the Safari for Windows and Ipad.... I seriously dont get why... If I revert the IsIOS7 check Iphone 4 gets broken rest get fixed :) I will just have to live with it...

[taye]

What version of iOS and what browser are you using? Can you try testing on both Chrome and Firefox?

[dobromir-hristov]

IOS 6.1.2 with Safari on Iphone 4. I cannot update it to 7.1.2 because its an Iphone ofc.... and nothing works as it should ...
I will try to test under Chrome.

[taye]

Have you tried the other browsers yet?

[dobromir-hristov]

Yes. When I changed the dropzone overlap to 0.1 everything got fixed 😄 I have no idea why...
I removed my rectChecker implementation and left the default one, and Iphone and Ipad are good.
Thank you for guiding me.

[taye]

Haha that makes sense. When overlap is used the rects of the draggable and dropzone are compared so it doesn't matter if both of them are wrong by the same amount :D

I guess Element.getClientRects is wrong only in iOS7 so I'll replace isIOS7orLower with just isIOS7.

Thanks for your help!