Web-bugs: OpenTable - Can't reserve table in Firefox using reservation widget

[overholt]

URL: http://www.plantatoronto.com/
Browser / Version: Firefox 53.0
Operating System: Windows 10
Problem type: Something else - I'll add details below

Steps to Reproduce

1. Navigate to: http://www.plantatoronto.com/
2. Click the 'x' to make the "NOW OPEN" thing go away
3. Click 'RESERVATIONS'

Expected Behavior:

Date and time for choosing your reservation should be present

Actual Behavior:

Just the text "Make a reservation" is visible. Behaviour is the same in Firefox Nightly and release (50). IE works fine and I'm told Chrome does, too.

_From webcompat.com with ❤️_

[wisniewskit]

Confirmed. I see this in the console in Firefox, investigating now:

TypeError: r(...).css(...) is undefined         restaurant-profile-e91c9b069062a6dfaec205b326d09fb6.js._gz:1:6738
    <anonymous> http://media.otstatic.com/javascripts/new/restaurant-profile-e91c9b069062a6dfaec205b326d09fb6.js._gz:1:6738
    <anonymous> http://media.otstatic.com/javascripts/new/restaurant-profile-e91c9b069062a6dfaec205b326d09fb6.js._gz:1:7299

TypeError: getComputedStyle(...) is null        bundle_common.js:2:31308
    c http://components.otstatic.com/components/js/1.0.80/min/bundle_common.js:2:31308
    b/v.prototype.start http://components.otstatic.com/components/js/1.0.80/min/bundle_common.js:2:28580
       (etc)

[wisniewskit]

They're using Foundation 5.1.1, which is calling getComputedStyle on elements that don't seem to be attached to the main document, so getComputedStyle is null, and the script bombs out before the widget for reservations is set up properly. I confirmed this with mitmproxy, by tweaking the scripts minimally so they didn't bomb, but just treated the getComputedStyle calls as returning null/empty values. I now see the reservation date-picker, and it seems to work.

Foundation is relying on non-standard behavior here, so until that stuff is fixed, they should work around it. Perhaps upgrading to Foundation 6 would work, but I have no idea how much effort that would entail for them. Another option is to do a couple of tiny surgical tweaks to the version they're using.

In restaurant-profile-e91c9b069062a6dfaec205b326d09fb6.js:

small: r(".foundation-mq-small").css("font-family").replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ""),
medium: r(".foundation-mq-medium").css("font-family").replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ""),
large: r(".foundation-mq-large").css("font-family").replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ""),
xlarge: r(".foundation-mq-xlarge").css("font-family").replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ""),
xxlarge: r(".foundation-mq-xxlarge").css("font-family").replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, "")

They can wrap each of the r.css calls to default to an empty string, like this:
(r(".foundation-mq-small").css("font-family")||"").replace...

Likewise, in bundle_common.js, they can wrap the getComputedStyle similarly so it defaults to an empty object, {}:

function c(a) { 
    var b, c = "position";
    return a.currentStyle ? b = a.currentStyle[c] : window.getComputedStyle && (b = (getComputedStyle(a)||{})[c]), "fixed" == b
}

This should be easy enough to do by hand, even on the minified script if need-be, and wouldn't take very long, so I suspect they should at least do that and gain support for Firefox users.

[adamopenweb]

@wisniewskit I think this is a duplicate of this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1302780. If so the problem is with open table. Taking needscontact off until we confirm.

[wisniewskit]

Yes, that's it, the page is using opentable. Shall we close this a dupe, then?

[adamopenweb]

@wisniewskit from our IRC conversation:
With the holidays approaching, this issue could be impacting many more Firefox users. There's work happening on getComputedStyle in iframe but it will take some time before it rides the trains. Maybe Open Table can help get this fixed faster using your suggestion above.

[adamopenweb]

Maybe @todd or @matteofigus can help us find a contact at @opentable to get this fixed?

[matteofigus]

Hi! Thanks for letting us know! We will investigate asap and will update this issue. Thanks!

[adamopenweb]

So it looks like the http://www.plantatoronto.com one is fixed. @overholt can you confirm?

The issue for http://www.epicsteak.com/find-a-table/, originally reported on bugzilla still exists though. Let's keep this issue open for now to track it.

[overholt]

In a fresh nightly Firefox profile, http://www.plantatoronto.com/'s reservation field works.
In a fresh release Firefox (50.1.0) profile, http://www.plantatoronto.com/'s reservation field is still broken. In the console I see, among other things: TypeError: getComputedStyle(...) is null

[overholt]

Oddly, I just tried in a brand new Firefox 50.1.0 profile and it works. I guess we can close this?

[adamopenweb]

Thanks @overholt and @matteofigus for this.

I'm opening this one back up just to track the Epic Steak issue from Bugzilla, since we have our contact happening here.

[adamopenweb]

@matteofigus it seems this issue still exists. Any chance you can give an update?

[matteofigus]

Thanks @adamopenweb - I notified the team and waiting for an answer. Will keep you posted.

[matteofigus]

@adamopenweb I heard the team worked on some improvements and the bug should be fixed. Can you verify again? It looks good in my Firefox now.

[adamopenweb]

I can confirm that this is fixed in Firefox 56 for OSX.

Thanks for the help @matteofigus!