Bug 244627

Summary: [Quirk] REGRESSION (r286874): Disable resolution media feature on Expedia.com
Product: WebKit Reporter: Sam Sneddon [:gsnedders] <gsnedders>
Component: CSSAssignee: Sam Sneddon [:gsnedders] <gsnedders>
Status: RESOLVED FIXED    
Severity: Normal CC: Hironori.Fujii, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=201736
https://bugs.webkit.org/show_bug.cgi?id=239980
Bug Depends on:    
Bug Blocks: 247940    

Description Sam Sneddon [:gsnedders] 2022-08-31 12:47:55 PDT
rdar://98750324

Steps To Reproduce:
1. Navigate to https://www.expedia.com/
2. Select the check-in date, observe the drop-down menu expands the page, doesn’t fit into the window layout, got cropped at the far right.

Also to note, because I couldn’t repro this initially: this is very sensitive to the width of the window to repro.

This is what no longer matches:

@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) and(stroke-color: transparent) {
        .uitk-menu-mounted .uitk-menu-container.uitk-menu-container-autoposition {
            animation-fill-mode: none, forwards;
            transform:translateX(var(--menu-offset-translate-x))
        }
    }
}

So this is near identical to every other case of detecting Safari via non-support of min-resolution.

The JS that sets --menu-offset-translate-x does so when the following animation doesn’t do the right thing:

@keyframes menu-grow-left{
    from{
        transform:translate(-50%, -50%) scale(0, 0)
    }
    to{
        transform:translate(var(--menu-grow-x), 0) scale(1, 1)
    }
}

And we’re ending up with a computed value of "matrix(1, 0, 0, 1, 0, 0), which shouldn’t be happening (well, unless --menu-grow-x is 0). It seems that at least _some_ of the problem here is the use of percentages within translate, looking at what WPT transform animation tests we fail, but it still seems like we end up at the wrong endpoint even just replacing the from translate.

So we have two potential fixes: add a quirk to disable the standard resolution media feature for Expedia, or we fix that animation. That animation is apparently bug 201736, not supporting var in @keyframes. So quirking it off it is.

We already quirk'd resolution of on hotels.com in bug 239980, which is another Expedia Group property, and the date picker looks pretty similar (both visually and in code). Other Expedia Group properties affected by this: https://www.wotif.com, https://www.carrentals.com, https://www.cheaptickets.com, https://www.ebookers.com, https://www.orbitz.com, https://www.travelocity.com. Note that some of these have a variety of localized domains (we currently quirk www.hotels.com, but not uk.hotels.com, yet alone www.hoteles.com).
Comment 1 Sam Sneddon [:gsnedders] 2022-08-31 14:51:22 PDT
Pull request: https://github.com/WebKit/WebKit/pull/3877
Comment 2 EWS 2022-09-07 17:15:59 PDT
Committed 254256@main (ee272e04a0b4): <https://commits.webkit.org/254256@main>

Reviewed commits have been landed. Closing PR #3877 and removing active labels.
Comment 3 Fujii Hironori 2022-09-11 13:29:27 PDT
Bug 245054 – [AppleWin] REGRESSION(254256@main): Quirks.cpp(240,9): error C3861: 'topPrivatelyControlledDomain': identifier not found