Bug 244627
Summary: | [Quirk] REGRESSION (r286874): Disable resolution media feature on Expedia.com | ||
---|---|---|---|
Product: | WebKit | Reporter: | Sam Sneddon [:gsnedders] <gsnedders> |
Component: | CSS | Assignee: | 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 |
Sam Sneddon [:gsnedders]
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).
Attachments | ||
---|---|---|
Add attachment proposed patch, testcase, etc. |
Sam Sneddon [:gsnedders]
Pull request: https://github.com/WebKit/WebKit/pull/3877
EWS
Committed 254256@main (ee272e04a0b4): <https://commits.webkit.org/254256@main>
Reviewed commits have been landed. Closing PR #3877 and removing active labels.
Fujii Hironori
Bug 245054 – [AppleWin] REGRESSION(254256@main): Quirks.cpp(240,9): error C3861: 'topPrivatelyControlledDomain': identifier not found