Demos site freezes IE 11

[svdoever]

Describe the bug The demo site (demos/index.html) does not work in Internet Explorer 11. The initial screencis drawn with overview of all components, then Internet Explorer 11 completely freezes.c Not possible to open the development tools to investigate issues.

This is the case both when built using npm run build:demos and run with serve ., and when using npm run dev and navigate to http://localhost:8000/demos/index.html.

To Reproduce Steps to reproduce the behavior: see above.

Expected behavior A working demo with all components working in IE 11!

Browser Version (please complete the following information):

• OS: Windows 10
• Browser Internet Explorer
• Version 11

[e111077]

do you experience the same on the deployed version?

https://material-components.github.io/material-components-web-components/demos/index.html

[svdoever]

@e111077 yes also on the online version. It completely freezes IE 11, can't do anything anymore, not switch tabs, not go to menu. Completely frozen.

Is it the intention for the components to work on IE 11? I tried for example the Fab component in separation on IE 11 (with the same samples as in the demo), and does not work either, Fab is shown, but the texts and icons on it don't show.

[e111077]

IE 11 is a supported browser. We do unit testing and screenshot tests on all of our components on IE. FAB included.

The demos worked on IE at first deployment so we'll have to see what changed.

[svdoever]

That is great news!! It will make the MCW components a great viable solution for out websites, because the reality is that we still need to support IE 11 on many of our B2B and B2C web-sites. It's still often the default browser used by people from within an office environment.

Sample of Fab on Chrome:

Sample of Fab on Chrome:

[e111077]

was able to finally get ahold of an IE VM. Oddly enough, the reason I think I never ran into this issue with the demos is that the pages work and are fully interactive if you have IE dev tools open. If you close it, then it freezes 🙃

[e111077]

furthermore, if you would like to see our fab demos on IE, direct links to the demos does not freeze IE. You can check it out here:

https://material-components.github.io/material-components-web-components/demos/

[svdoever]

When I copy that link in my IE 11 it freezes.... I'm running it on Windows 10. But I assume it doesn't on your system... really strange... I will ask colleagues to test it out as well on Monday...

[e111077]

ah, it seems if you open dev tools at any point in the session, the app does not freeze and you no longer have to keep it open. This is going to be fun to debug

Though I would like to note that the MWC playground (which is an unoptimized build) will work on IE without freezing

https://mwc-demos.glitch.me/

[svdoever]

Cool, that works! Tried to see what exactly happen in the glitch setup, and the rollup configuration...

import resolve from '@rollup/plugin-node-resolve';
import copy from 'rollup-plugin-copy';

const unbundledMsg = `Don't want to use any bundling tools? Check out the <a href="./unbundled.html">unbundled version</a>!`;

export default [
  {
    // index es6
    input: 'index.js',
    output: {
      file: 'index.bundled.js',
      format: 'iife',
    },
    plugins: [
      resolve(),
      copy({
        targets: [
          {
            src: './unbundled.html',
            dest: '.',
            rename: 'index.html',
            inject: false,
            transform: (contentsRaw) => {
              const contents = contentsRaw.toString();
              return contents.replace('index.js', 'index.bundled.js').replace('<!-- unbundled -->', unbundledMsg);
            }
          }
        ]
      })
    ],
    watch: {include: ['unbundled.html']}
  },
];

I see a bundled version in the file index.bundled.js, but not minified... , output is set to life, but comment says // index es6. What is the best approach to get a production bundle for IE11? In my own rollup I build both a normal and a legacy bundle for IE 11, and use the module/nomodule trick for loading the correct bundle. But the Fab is not working in my setup.

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import filesize from 'rollup-plugin-filesize';
import typescript from '@rollup/plugin-typescript';
import sass from 'rollup-plugin-sass';

export default [
  {
    input: ['src/index.ts'],
    output: {
      file: 'build/index.js',
      format: 'esm',
      sourcemap: true
    },
    plugins: [
      sass({output:true}), 
      typescript(), 
      resolve(), 
      terser(), 
      filesize()
    ]
  },
  {
    input: ['src/index.ts'],
    output: {
      file: 'build/index.legacy.js',
      format: 'esm',
      sourcemap: true
    },
    plugins: [
      sass({output:false}),
      typescript({target: "es5"}),
      resolve(),
      commonjs({
        include: 'node_modules/**'
      }),
      babel({
        runtimeHelpers: true,
        presets: [
          [
            '@babel/preset-env',
            {
              useBuiltIns: false,
              modules: false,
              targets: {
                browsers: '> 1%, IE 11, not dead'
              }
            }
          ]
        ],
        plugins: ['@babel/plugin-transform-runtime']
      }),
      terser(),
      filesize()
    ]
  }
];

And in my index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web Components exploration</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap" rel="stylesheet">
    <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" as="style" onload="this.onload=null;this.rel='stylesheet'">

    <style>
        mwc-fab {
            margin-right: 50px;
        }
        .blackAndWhite {
            --mdc-theme-on-secondary: black;
            --mdc-theme-secondary: white;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="./index.css">

    <script src="webcomponents-loader.js"></script>

    <script src='index.js' type="module"></script>
    <script src='index.legacy.js' nomodule=""></script>
</head>

<body>
    <h1>FAB</h1>
    <mwc-fab icon="edit"></mwc-fab>
    <mwc-fab icon="add" mini></mwc-fab>
    <mwc-fab icon="shopping_cart" extended label="Add To Cart"></mwc-fab>
    <mwc-fab icon="share" class="blackAndWhite"></mwc-fab>
    <h1>TEST WITH STYLE</h1>
</body>
</html>

[e111077]

So glitch is used for a different use case:

we don't want to minify or uglify it since the glitch demo is meant to be used as a dev playground. That's why it says es6, because it outputs an ES6 bundle (needs to be a bundle due to glitch's free-tier request maximums) and then @openwc's es-dev-server is the one that compiles the file at server-request-time.

We intended the github pages demo to be the production-optimized build where we precompile and bundle all of our deps, but as you can see, it seems as if we have a bug somewhere in minification.

Also there seems to be an issue in your index.html where the link rel="preload" performance trick does not work on IE since preload doesn't exist on IE onload will never be called. This is why we have the IE style transformer to change these into rel=stylesheet.

https://github.com/material-components/material-components-web-components/blob/master/demos/index.html#L34

This means your icons and fonts are not loading correctly

[e111077]

Issue has been fixed in #1530 and #1539. Cause was likely the link rel preload shim I wrote.