www.mountainmikespizza.com - design is broken

[karlcow]

URL: https://www.mountainmikespizza.com

Browser / Version: Safari 16.0
Operating System: Mac OS X 10.15.7
Tested Another Browser: Yes Firefox

Problem type: Design is broken
Description: Items not fully visible
Steps to Reproduce:

1. go to https://www.mountainmikespizza.com/locations/mountain-view-miramonte/?storecode=229
2. Click on order online, it redirects you to https://order.mountainmikespizza.com/?id=N63J7&str=mountain-mike-s-pizza-mountain-view
3. Choose continue as guest without allowing the geolocation
4. Choose an address in Mountain View such as 140 Chatham Way
5. Choose an appropriate time
6. Continue
7. A list of pizza is displayed
8. Select customize on the first one.

Expected:
fully visible panel of choice

Actual:
The panel is hidden at the top.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

This is also tracked at rdar://91595821

.dialog-safari {
position: fixed !important;
top: 50% !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
}

Firefox Nightly 103 receives the .dialog-safari, but it is not affected.
Removing .dialog-safari fixes it in Safari and doesn’t change the layout in Firefox for now.

The source of this specific hack is in
https://order.mountainmikespizza.com/js/site.js?v=O8MpPPUmJCmbBOQCm-ZKb3gwlic

function registerDialogs() {
    dialogs = document.getElementsByTagName("dialog");
    let browserName = GetBrowserName();
    for (let i = 0; i < dialogs.length; i++) {
        dialogPolyfill.registerDialog(dialogs[i]);
        if (browserName === "Safari" || browserName === "Firefox") {
            dialogs[i].classList.add("dialog-safari");
        }
    }
}

The behavior of Safari is on the other hand correct, and Firefox will probably align with it.

Gecko filed this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1772305 , @emilio from Mozilla suggests that Chrome/WebKit behavior might actually be correct.

[karlcow]

Contacts have been initiated with the people of Adora, but for now, no answers.
Maybe @ando0 or @yurafox could help finding the right person to fix this.

This affects a lot of other sites.

• https://www.marcos.com/ and I can’t access from Japan.
• https://flippinpizza.hungerrush.com/Order/Menu/19 same thing no access from Japan.
• Bingo same issue on
  • https://assantes.adorapos.net/?id=NNJ91&str=assantes-pizza-delivery-richmond
  • https://currypizza.adorapos.net/?id=J4RQL
  • https://northwoodpizza.adorapos.net/?id=LPZ1Y
  • https://freshbrothers.adorapos.net/?id=NUCGW

All Adora framework.

[karlcow]

Once Gecko is fixing the bug, this will break on Firefox too.

[karlcow]

It might require a site patch.

[karlcow]

The offending code is still there.
I have contacted them and replied:

Hi Karl,

Thanks for reaching out.
Yes, we fixed that. But after that we got another issue with older version of Safari.
So that we added Safari version check to let this code work on all Safari versions.

Thanks again for your support.

This is not fixed at least on mountainmikespizza.com
https://order.mountainmikespizza.com/js/site.js?v=sXRjYvdgTnOYG-7gSyFGU9qExIM

Probably it depends on the sites also updating their local scripts.

[karlcow]

@ksy36 @denschub And now Firefox should be broken too. Safari is creating a UA override for https://www.mountainmikespizza.com/

[karlcow]

Rendering in Firefox Nightly