Bug 279011 – Remove shouldDispatchedSimulatedMouseEventsAssumeDefaultPrevented for amazon.*

• Status: NEW
• Component: WebKit Misc.

[Karl Dubost]

This is a bug to remove a Quirk. 

To try to reproduce.
1. Plug the iPad (landscape) to a mac.
2. Open amazon.com
3. Develop Menu -> Select iPad
4. Click on the top left icon for the device settings.
5. Choose Disable site-specific hacks
6. Go to https://www.amazon.com/Exclusive-Thrilling-Heroics-Firefly-Stainless/dp/B01GIJ88XC/
7. Tap on the product image
8. A window appears on the right side with a blow up of the image and a blue grid on the original image
9. move the blue grid around

Expected:
The corresponding image on the right side is moving along. 

If I didn't misunderstand the bug, it would mean that this part can be removed.
https://github.com/WebKit/WebKit/blob/8f07bf9963e1bf4e307fc0d68556df4b21d2e95d/Source/WebCore/page/Quirks.cpp#L526-L533

[Radar WebKit Bug Importer]

<rdar://problem/135134914>

[Karl Dubost]

Notes: In the original bug report it says that the page should not scroll when moving the blue grid. 

hmm maybe I can reproduce on some images.

[Karl Dubost]

Interestingly, it seems that Amazon has a special case for iPad. 


In https://m.media-amazon.com/images/I/11e6YKvz8HL._RC|61ERslxmD0L.js,614OTpIBP-L.js,11QPSzcZzFL.js,21Tlkr4uAnL.js,31e-8pJy4aL.js_.js?AUIClients/DetailPageDesktopImageBlockMetaAsset&dKPSvb9N

        r = e.detailImageUrl,
        b = e.useHoverZoomIpad || 0,

which is defined in the HTML inside a string 

var obj = jQuery.parseJSON(' here JSON to parse ')

which includes:

  "useChildVideos": true,
  "useClickZoom": false,
  "useHoverZoom": true,
  "useHoverZoomIpad": false,
  

I wonder if developers are puzzled by the behavior of the iPad. Maybe there's an opportunity for Outreach.

The quirk is triggered for "magnifierLens".

for example

<div 
    id="magnifierLens" 
    style="
        position: absolute; 
        background-image: url(&quot;https://m.media-amazon.com/images/G/01/apparel/rcxgs/tile._CB483369110_.gif&quot;); 
        cursor: pointer; 
        width: 117px; 
        height: 162px; 
        left: 102px; 
        top: 113px;">
</div>

[Karl Dubost]

All of this is handled by

```
                ca = function() {
                    function b(a) {
                        var b = Math.round(Math.min(l.width(), q.rect.width / a));
                        a = Math.round(Math.min(l.height(), q.rect.height / a));
                        r.css({
                            width: b,
                            height: a
                        });
                        d = [b, a]
                    }
                    var c = this,
                        d = [0, 0],
                        n = (q.detailSize && q.detailSize[0] || 5E8) / y[2],
                        f = (q.detailSize && q.detailSize[1] ||
                        5E8) / y[3];
                    n = f > n ? f : n;
                    a("#magnifierLens").remove();
                    var r = a("\x3cdiv id\x3d'magnifierLens' /\x3e").css({
                        position: "absolute"
                    });
                    e.generalImageUrls.zoomLensBackground && r.css({
                        backgroundImage: "url(" + e.generalImageUrls.zoomLensBackground + ")"
                    });
                    D.showMagnifierOnHover ? H(r) : r.css("cursor", "pointer");
                    c.updatePosition = function() {
                        var a = [y[2] - d[0], y[3] - d[1]],
                            b = 0 >= a[0] ? .5 : Math.max(0, Math.min(1, (v[0] - d[0] / 2 - y[0] - c.offset.left) / a[0])),
                            n = 0 >= a[1] ? .5 : Math.max(0, Math.min(1, (v[1] - d[1] / 2 - y[1] - c.offset.top) / a[1])),
                            f = y[0] +
                            Math.round(b * a[0]);
                        a = y[1] + Math.round(n * a[1]);
                        r.get(0).style.left = f + "px";
                        r.get(0).style.top = a + "px";
                        return [b, n]
                    };
                    c.destroy = function() {
                        r.remove()
                    };
                    c.offset = l.offsetParent().offset();
                    b(n);
                    c.updatePosition();
                    r.appendTo(l.parent());
                    q.detailImage[0].complete || q.detailImage.load(function() {
                        var a = q.detailImage.width() / y[2];
                        b(a);
                        c.updatePosition()
                    })
                };
```