Bug 244627 - [Quirk] REGRESSION (r286874): Disable resolution media feature on Expedia.com
Summary: [Quirk] REGRESSION (r286874): Disable resolution media feature on Expedia.com
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Sam Sneddon [:gsnedders]
URL:
Keywords: InRadar
Depends on:
Blocks: 247940
  Show dependency treegraph
 
Reported: 2022-08-31 12:47 PDT by Sam Sneddon [:gsnedders]
Modified: 2022-11-14 23:31 PST (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
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