1413784 - restaurant.ikyu.com is broken in Firefox on touch-capable devices because it relies on cross-site CSSOM

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P3)

Description

[Brian Birtles (:birtles)]

Based on: https://github.com/webcompat/web-bugs/issues/13005

If you load any of the course pages, e.g. https://restaurant.ikyu.com/100208/plan10546083/, there is a spinner that should eventually stop spinning and reveal the available booking times.

However, instead somewhere along the way script calls `insertRule` and we throw a `SecurityError` and everything breaks. It works in Chrome and Edge, and curiously on Mac, Linux, and non-e10s Windows Firefox.

User impact: Unable to book classy restaurants in Japan using Firefox on Windows.

Mike, perhaps you can bring this up with the Blink folk at TPAC?

Comment 1

[Xidorn Quan [:xidorn] UTC+10]

I've been tired about this kind of issues... Probably we should just not throw in that case for webcompat if Blink cannot promise anytime to change their behavior soonish.

Comment 2

[Brian Birtles (:birtles)]

It turns out the offending script only gets run on touch-capable devices.

Comment 3

[Mike Taylor [:miketaylr]]

If we can, let's ask the site to fix this. And yeah, I'll add it to list of things to chat about with Blink folks.

Comment 4

[Mike Taylor [:miketaylr]]

SecurityError: The operation is insecure.

vendor-af4c020.js:1
1JIY/</<
rangetouch.js:53
1JIY/<
rangetouch.js:44
1JIY/<
rangetouch.js:14
1JIY
rangetouch.js:8
c
bootstrap%20e667c697eb6f132b5710:54
[0]
vendor-af4c020.js:7629
c
bootstrap%20e667c697eb6f132b5710:54
window.webpackJsonp
bootstrap%20e667c697eb6f132b5710:25
<anonymous>
vendor-af4c020.js:1


// rangetouch.js v1.0.5
// Making <input type="range"> work on touch devices
// https://github.com/selz/rangetouch

// Setup
function setup() {
  // Bail if not a touch enabled device
  if (!('ontouchstart' in document.documentElement)) {
      return;
  }

  // Add useful CSS
  if (settings.addCSS) {
      var stylesheets = document.styleSheets;
      var stylesheet = stylesheets.length ? stylesheets[0] : createStyleSheet();
      stylesheet.insertRule(getSelector() + ' { user-select: none; -webkit-user-select: none; touch-action: manipulation; }', 0);
  }

  // Listen for events
  listeners();
}

I'll file a bug on that github repo as well.

Comment 5

[Mike Taylor [:miketaylr]]

Filed https://github.com/sampotts/rangetouch/issues/8

Comment 6

[Mike Taylor [:miketaylr]]

(In reply to Mike Taylor [:miketaylr] from comment #5)

Filed https://github.com/sampotts/rangetouch/issues/8

This was fixed.

And the error as reported no longer reproduces.