When you have an THEME.breakpoints.yml file like the Bartik Core Theme has one, where the smallest breakpoint has an empty string as mediaQuery property, the BreakpointLoader.js file throws an error "Invalid Argument" on IE 10 & 11.

YAML Example from Bartik theme:

bartik.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x

This happens on line 55: var mql = window.matchMedia(breakpoints[i].mediaQuery);

I know it is not a bug from the theme_breakpoints_js module, but I think you should consider to provide a fallback / polyfill for this case.

I would suggest to check the property for a empty string and, if it's empty, replace it with an always matching value. E. g.:

if (breakpoints[i].mediaQuery === '') {
  breakpoints[i].mediaQuery = '(min-width: 0em)';
}

I created an according PR on Github if you like.

Comments

alamowo created an issue. See original summary.

alamowo’s picture

Issue summary: View changes

  • mxh committed 579d317 on 8.x-1.x authored by alamowo
    Issue #2909620 by alamowo: IE 11 fails on empty mediaQuery property
    

mxh credited mxh.

It seems I'm too dumb to give credit to others.

mxh’s picture

Status: Active » Fixed

Committed and pushing out new release. Thanks!

mxh’s picture

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.