Closed Bug 1545823 Opened 7 months ago Closed 6 months ago

The lack of StyleSheet.rules (instead of cssRules) make videojs player fails (also addRule() and removeRule() )

Categories

(Core :: DOM: CSS Object Model, defect)

66 Branch
defect
Not set

Tracking

()

RESOLVED FIXED
mozilla68
Webcompat Priority P1
Tracking Status
firefox66 --- wontfix
firefox67 --- wontfix
firefox68 --- fixed

People

(Reporter: alex_mihail, Assigned: emilio)

References

()

Details

(Keywords: dev-doc-complete, webcompat:contact-ready, Whiteboard: [cssRule][webcompat:p1][wpt-failing][wptsync upstream])

Attachments

(1 file)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

Visit https://www.unilad.co.uk/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort/ - just one example of a "Brightcove" video player that will not load, I have been seeing these everywhere and even on a clean, blank FireFox profile it will not load.

Actual results:

Video player doesn't load - console spits out error: "AbortError: The fetching process for the media resource was aborted by the user agent at the user's request."

Expected results:

Video player should have loaded

Component: Untriaged → Audio/Video: Playback
Product: Firefox → Core

I can confirm this happens on Nightly 68.0a1 (2019-04-19) (64-bit) in a fresh profile.

Jean-Yves, any thoughts on who should take a look at this?

Flags: needinfo?(jyavenard)

lots of errors in the console:

vis change0 loader.js:14:5684
Invalid URI. Load of media resource failed. video.php
TypeError: document.body is null c8ee9446-97ed-462f-a5e9-1af66c8e9104-web.js:2:104688
VIDEOJS: Play middleware has been registered with videojs index.min.js:1:63772
TypeError: s is undefined index.min.js:1:782686
received debugLog length: 396 extractMediaInfo.js:211:9
debugLog objects.keys length: 2 extractMediaInfo.js:214:9
debugLog messages.keys length: 2 extractMediaInfo.js:215:9
TypeError: data.share is undefined app.js:14:256
TypeError: "document.getElementById(...) is null"
<anonymous> https://www.unilad.co.uk/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort/:544
sl https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ql https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ml https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
E https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ml https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Jl https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
yv https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
gg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
v https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
gg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
then https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
eg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
fg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
uj https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
then https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
E https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
push https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ya https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
va https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
onload https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
pubads_impl_2019041801.js:1:66300
Powered by AMP ⚡ HTML – Version 1904200955460 https://www.unilad.co.uk/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort/ amp4ads-v0.js:588:100
Powered by AMP ⚡ HTML – Version 1904200955460 https://www.unilad.co.uk/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort/ amp4ads-v0.js:588:100
received debugLog length: 5420 extractMediaInfo.js:211:9
debugLog objects.keys length: 13 extractMediaInfo.js:214:9
debugLog messages.keys length: 35 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
Failed to load thumbnail https://images-dup.taboola.com/taboola/image/fetch/f_jpg%2Cq_auto%2Ch_140%2Cw_140%2Cc_fill%2Cg_faces:auto%2Ce_sharpen/https%3A//www.unilad.co.uk/wp-content/uploads/2017/04/1247-LFP-birth-Bancroft-73-1024x684@2x.jpg for item=7420041269642947164, loading default thumbnail instead impl.354-564-RELEASE.js:3:726
The script from “https://aa.agkn.com/adscores/g.json?sid=9202507693” was loaded even though its MIME type (“application/json”) is not a valid JavaScript MIME type. rt=ifr
The script from “https://15.taboola.com/tb?oid=15&pubnm=uniladuk&unitType=244&tbloc=&pageType=text&pstn=Below%20Article%20Thumbnails&uuip=Feed%20-%20Below%20Article%20Thumbnails&cisrf=&cirf=https%3A%2F%2Fwww.unilad.co.uk%2Fanimals%2Fbear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort%2F&encoded=1&uid=c4e85000-cdb6-4577-9a6c-304e66fd7258-tuct3c14b59&variant=-100|1173147132&callback=TRC.videoTagCallbacks.videoCallback1&cb=1556596420983&tagid=&cntry=AU&platform=1&sesid=da19fb8529ea2fde5c8cde8ff42c64e6&itemid=/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort&viewid=1556596420348&geolat=&geoing=&deviceifa=&appid=&sd=v2_da19fb8529ea2fde5c8cde8ff42c64e6_c4e85000-cdb6-4577-9a6c-304e66fd7258-tuct3c14b59_1556596185_1556596420_CNawjgYQuJxGGPzdgeOmLSADKAEwEDiu_QZA9YUQSLmrGFDvmgJYAGAA&ri=60bdcf9500fe7db358e01da1914f4c7e&appname=&cdb=&gdprApplies=false&sii=4879456216713686715” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type. bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort
received debugLog length: 429730 extractMediaInfo.js:211:9
debugLog objects.keys length: 32 extractMediaInfo.js:214:9
debugLog messages.keys length: 2633 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
TypeError: "document.getElementById(...) is null"
<anonymous> https://www.unilad.co.uk/animals/bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort/:544
sl https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ql https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ml https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
E https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ml https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Jl https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
yv https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
gg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
v https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
gg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
then https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
eg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
fg https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
uj https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
then https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
E https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
ec https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
push https://securepubads.g.doubleclick.net/gpt/pubads_impl_rendering_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Ya https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
va https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
onload https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
Q https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019041801.js:1
pubads_impl_2019041801.js:1:66300
The script from “https://pixel.advertising.com/ups/58166/sync?gdpr=1&uid=&_origin=1&redir=true” was loaded even though its MIME type (“”) is not a valid JavaScript MIME type. st
The script from “https://vidstat.taboola.com/dsm/163/dsm.js” was loaded even though its MIME type (“application/octet-stream”) is not a valid JavaScript MIME type. bear-cub-faces-euthanisation-for-being-too-friendly-with-visitors-to-ski-resort
Content Security Policy: Directive ‘child-src’ has been deprecated. Please use directive ‘worker-src’ to control workers, or directive ‘frame-src’ to control frames respectively.
Content Security Policy: Directive ‘child-src’ has been deprecated. Please use directive ‘worker-src’ to control workers, or directive ‘frame-src’ to control frames respectively.
An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing container.html:8
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
a: 0ms - timer ended sca.17.4.95.js:32:8009
Array.slice is deprecated; use Array.prototype.slice instead sca.17.4.95.js:32:2336
onmozfullscreenerror is deprecated. sca.17.4.95.js:33:3442
WebRTC interfaces with the “moz” prefix (mozRTCPeerConnection, mozRTCSessionDescription, mozRTCIceCandidate) have been deprecated. sca.17.4.95.js:33:4653
The character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature. rtb-h
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 618 extractMediaInfo.js:211:9
debugLog objects.keys length: 2 extractMediaInfo.js:214:9
debugLog messages.keys length: 4 extractMediaInfo.js:215:9
received debugLog length: 617 extractMediaInfo.js:211:9
debugLog objects.keys length: 2 extractMediaInfo.js:214:9
debugLog messages.keys length: 4 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
Empty string passed to getElementById(). tag:31:109
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 4359 extractMediaInfo.js:211:9
debugLog objects.keys length: 32 extractMediaInfo.js:214:9
debugLog messages.keys length: 3 extractMediaInfo.js:215:9
received debugLog length: 618 extractMediaInfo.js:211:9
debugLog objects.keys length: 2 extractMediaInfo.js:214:9
debugLog messages.keys length: 4 extractMediaInfo.js:215:9
received debugLog length: 619 extractMediaInfo.js:211:9
debugLog objects.keys length: 2 extractMediaInfo.js:214:9
debugLog messages.keys length: 4 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
onmozfullscreenchange is deprecated. TQWvfC0Rjqi.js:263:5600
received debugLog length: 7285 extractMediaInfo.js:211:9
debugLog objects.keys length: 32 extractMediaInfo.js:214:9
debugLog messages.keys length: 28 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
XML Parsing Error: syntax error
Location: https://opps.taboola.com/OpportunityServlet
Line Number 1, Column 1: OpportunityServlet:1:1
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
XML Parsing Error: syntax error
Location: https://opps.taboola.com/OpportunityServlet
Line Number 1, Column 1: OpportunityServlet:1:1
received debugLog length: 160 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9
received debugLog length: 159 extractMediaInfo.js:211:9
debugLog objects.keys length: 1 extractMediaInfo.js:214:9
debugLog messages.keys length: 0 extractMediaInfo.js:215:9

Sounds like webcompat issue

Flags: needinfo?(jyavenard) → needinfo?(kdubost)

The video hosted on facebook is working.
But the videos using Brightcove videojs are indeed failing.

They are inserted through an iframe.

<iframe min-width="560" 
  class="brightcove-iframe lazyloaded" 
  src="//www.unilad.co.uk/frames/brightcove-iframe.html?videoId=6027927585001" 
  allowfullscreen="" 
  webkitallowfullscreen="" 
  mozallowfullscreen="" 
  data-rocket-lazyload="fitvidscompatible" 
  data-lazy-src="//www.unilad.co.uk/frames/brightcove-iframe.html?videoId=6027927585001"
  data-was-processed="true" 
  width="100%" height="360" frameborder="0"></iframe>

If I open directly https://www.unilad.co.uk/frames/brightcove-iframe.html?videoId=6027927585001
we get the same issue, so maybe a better place to start the diagnosis.

The error message with s is undefined is happening here.

    (function() {
      m.hookOnce("setup", function(e) {
        var r = e.options_["data-player"];
        var i = e.options_["data-embed"] || "default";
        var n = ".bc-style-" + r + "-" + i;
        var a = t.head.querySelector(n);
        if (!a || a._increasedSpecificity) {
          return;
        }
        a._increasedSpecificity = true;
        var s = a.sheet.rules;
        var o = ".bc-player-" + r + "_" + i;
        for (var u = 0; u < s.length; u++) {
          if (!s[u].selectorText) {
            continue;
          }
          s[u].selectorText = s[u].selectorText.replace(o, o + o);
        }
      });
    })(t, m);

on this line for (var u = 0; u < s.length; u++) {

s is defined just before with var s = a.sheet.rules;

a is

<style type="text/css" class="bc-style-OjXFXUz10-default">
  .bc-player-OjXFXUz10_default *,
  .bc-player-OjXFXUz10_default:after,
  .bc-player-OjXFXUz10_default:before {
    box-sizing: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit
  }

/* plenty more rules */


</style>

a.sheet is defined, but a.sheet.rules is not a thing in Gecko world, but it exists in WebKit/Blink world.

a.sheet.cssRules is a thing and it is 138 long. They should use that.

I thought we had a Bugzilla bug for this, but it doesn't seem or I can find it right now. Anyway if they are willing to fix it. It will be to just use cssRules and if they are sure they will hit very old system.

to have a var rules = a.sheet.cssRules | a.sheet.rules

They seem to use the hosted version of brightcove player with version 5.1.0
The current version is VERSION 6 - v6.34.3

There is https://github.com/whatwg/compat/issues/98 for addRule.
Moving to CSSOM for now, but maybe should live in WebCompat. We could open a specific issue for it.

Blink discussed about removing the set of rules around it.
https://bugs.chromium.org/p/chromium/issues/detail?id=689684
but usage seems to be high.
https://www.chromestatus.com/metrics/feature/timeline/popularity/219

So I'm pushing this to contactready and it would be good to contact either brightcove about it.
OR to contact the site itself ans ask them to use a more recent version of Brightcove. That must have been fixed in recent versions, because we would have a lot more reports if not.

Component: Audio/Video: Playback → DOM: CSS Object Model
Flags: webcompat?
Flags: needinfo?(miket)
Flags: needinfo?(kdubost)
Summary: Video player not loading → The lack of StyleSheet.rules (instead of cssRules) make videojs player fails (also addRule() and removeRule() )
Whiteboard: [cssRule]
Assignee: nobody → emilio
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(miket)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/a93ed2a80220
Implement non-standard CSSStyleSheet.rules, CSSStyleSheet.addRule and CSSStyleSheet.removeRule. r=bzbarsky
Status: NEW → RESOLVED
Closed: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla68
Webcompat Priority: --- → P1
Flags: webcompat? → webcompat+
Whiteboard: [cssRule] → [cssRule][webcompat:p1]
Whiteboard: [cssRule][webcompat:p1] → [cssRule][webcompat:p1][wpt-failing]
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/16876 for changes under testing/web-platform/tests
Whiteboard: [cssRule][webcompat:p1][wpt-failing] → [cssRule][webcompat:p1][wpt-failing][wptsync upstream]
Upstream PR merged

Documentation updates; these include a number of previously unwritten pages that we never got around to before as a bonus!

You need to log in before you can comment on or make changes to this bug.