webcomponents / webcomponentsjs

A suite of polyfills supporting the HTML Web Components specs
http://webcomponents.org/polyfills/
Other
3.87k stars 490 forks source link

library "webcomponentsjs" freeze Firefox and Safari #574

Closed ntanitime closed 7 years ago

ntanitime commented 8 years ago

Hi, below there is a simple angular page with a dialog (using angular material). I load webcomponents.js but I never use it in this code.

When firefox download this: <script src="bower_components/webcomponentsjs/webcomponents.js"></script> it seems to freeze for something like 1 second and after the code broke and the dialog never show up.

It seems that webcomponents.js breaks something inside firefox that aster breaks how angular material behave.

<head>
    <base href="/">
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css"/>
</head>
<body ng-app="sandbox">

<div ng-controller="AppCtrl" id="popupContainer">
    <md-button class="md-primary md-raised" ng-click="showAlert($event)">Alert Dialog</md-button>
</div>

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>

<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/angular-socket-io/socket.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-validation-match/dist/angular-validation-match.min.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>

<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-partial/angular-translate-loader-partial.js"></script>
<script src="bower_components/webrtc-adapter/adapter.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>

<script>
    angular.module('sandbox', ['ngMaterial']);

    angular.module('sandbox').controller('AppCtrl', function ($scope, $mdDialog) {
        $scope.showAlert = function (ev) {
            // Appending dialog to document.body to cover sidenav in docs app
            // Modal dialogs should fully cover application
            // to prevent interaction outside of dialog
            $mdDialog.show(
                $mdDialog.alert()
                .parent(angular.element(document.querySelector('#popupContainer')))
                .clickOutsideToClose(true)
                .title('This is an alert title')
                .textContent('You can specify some description text in here.')
                .ariaLabel('Alert Dialog Demo')
                .ok('Got it!')
                .targetEvent(ev)
            );
        };
    });
</script>

</body>
</html>
notwaldorf commented 7 years ago

Closing, as this is an old issue and doesn't have any repro steps that we can look at (for example, it's impossible to know how those elements in bower_components work together). Please re-open if you have more details (a JSBin with repro steps is preferred)