ContainerBreakpointObserver breaks on Chrome 58

[lukasholzer]

Bug Report

Expected Behavior

ContainerBreakpointObserver should work on Chrome 56+

Current Behavior

Is not working on Chrome 58

Throws following Error: Object doesn't support property or method 'append'

Full Exception with concealed values:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299
[ERROR][ExceptionHandlerService] https://[...]/33.ccb281bf289ba57e37cd.js: [TypeError] Object doesn't support property or method 'append'
     at __values (node_modules/@dynatrace/barista-components/fesm5/dynatrace-barista-components-container-breakpoint-observer.js:457:13)
     at isElementQuery (node_modules/@dynatrace/barista-components/fesm5/dynatrace-barista-components-container-breakpoint-observer.js:333:17)
     at _trySubscribe (node_modules/rxjs/_esm5/internal/Observable.js:43:13)
     at subscribe (node_modules/rxjs/_esm5/internal/Observable.js:31:9)
     at call (node_modules/rxjs/_esm5/internal/operators/takeUntil.js:15:9)
     at subscribe (node_modules/rxjs/_esm5/internal/Observable.js:31:9)
     at subscribeToResult (node_modules/rxjs/_esm5/internal/util/subscribeToResult.js:12:5)
     at _complete (=> this) (node_modules/rxjs/_esm5/internal/observable/combineLatest.js:62:17)
     at complete (=> this) (node_modules/rxjs/_esm5/internal/Subscriber.js:63:14)
     at subscribeToArray (=> subscriber) (node_modules/rxjs/_esm5/internal/util/subscribeToArray.js:7:9)
2020-08-25 08:12:29 UTC SEVERE  [<ige24129,0x2,node01sa90,tab-XE2Mxy9f3F6S>] [ClientLoggingServiceImpl] Client Side Exception | G5VBVM5P | [...] | [...]?gtf=-2h&gf=all&crashName=java.lang.NullPointerException | 1.200.84.20200820-103006 | Uncaught exception: Object doesn't support property or method 'append'
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299
[ERROR][ExceptionHandlerService] https://[...]/33.ccb281bf289ba57e37cd.js: [TypeError] Object doesn't support property or method 'append'
     at __values (node_modules/@dynatrace/barista-components/fesm5/dynatrace-barista-components-container-breakpoint-observer.js:457:13)
     at isElementQuery (node_modules/@dynatrace/barista-components/fesm5/dynatrace-barista-components-container-breakpoint-observer.js:333:17)
     at _trySubscribe (node_modules/rxjs/_esm5/internal/Observable.js:43:13)
     at subscribe (node_modules/rxjs/_esm5/internal/Observable.js:31:9)
     at call (node_modules/rxjs/_esm5/internal/operators/takeUntil.js:15:9)
     at subscribe (node_modules/rxjs/_esm5/internal/Observable.js:31:9)
     at subscribeToResult (node_modules/rxjs/_esm5/internal/util/subscribeToResult.js:12:5)
     at _complete (=> this) (node_modules/rxjs/_esm5/internal/observable/combineLatest.js:62:17)
     at complete (=> this) (node_modules/rxjs/_esm5/internal/Subscriber.js:63:14)
     at subscribeToArray (=> subscriber) (node_modules/rxjs/_esm5/internal/util/subscribeToArray.js:7:9)
2020-08-25 08:12:27 UTC SEVERE  [<ige24129,0x2,node01sa90,tab-XE2Mxy9f3F6S>] [ClientLoggingServiceImpl] Client Side Exception | IIJK3N7E | [...] | [...]?gtf=-2h&gf=all&crashName=java.lang.NullPointerException | 1.200.84.20200820-103006 | Uncaught exception: Object doesn't support property or method 'append'
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299
[ERROR][ExceptionHandlerService] https://[...]/33.ccb281bf289ba57e37cd.js: [TypeError] Object doesn't support property or method 'append'
     at __values (node_modules/@dynatrace/barista-components/fesm5/dynatrace-barista-components-container-breakpoint-observer.js:457:13)
     at isElementQuery (node_modules/@dynatrace/barista-components/fesm5/dynatrace-barista-components-container-breakpoint-observer.js:333:17)
     at _trySubscribe (node_modules/rxjs/_esm5/internal/Observable.js:43:13)
     at subscribe (node_modules/rxjs/_esm5/internal/Observable.js:31:9)
     at call (node_modules/rxjs/_esm5/internal/operators/takeUntil.js:15:9)
     at subscribe (node_modules/rxjs/_esm5/internal/Observable.js:31:9)
     at subscribeToResult (node_modules/rxjs/_esm5/internal/util/subscribeToResult.js:12:5)
     at _complete (=> this) (node_modules/rxjs/_esm5/internal/observable/combineLatest.js:62:17)
     at complete (=> this) (node_modules/rxjs/_esm5/internal/Subscriber.js:63:14)
     at subscribeToArray (=> subscriber) (node_modules/rxjs/_esm5/internal/util/subscribeToArray.js:7:9)

Context (Environment)

Chrome Version 58

Detailed Description

Code that throws the error:

DtContainerBreakpointObserver.prototype._createPlaceholderElement = /**
     * Creates a placeholder element for a given element query.
     * @private
     * @param {?} elementQuery
     * @return {?}
     */
    function (elementQuery) {
        if (this._placeholderContainer && this._document) {
            /** @type {?} */
            var placeholder = this._document.createElement('span');
            placeholder.style.width =
                elementQuery.feature === 'width' ? elementQuery.value : '1px';
            placeholder.style.height =
                elementQuery.feature === 'height' ? elementQuery.value : '1px';
            placeholder.className = PLACEHOLDER_ELEMENT_CLASS;
            this._placeholderContainer.nativeElement.append(placeholder);
            return placeholder;
        }
        return null;
    };

Possible Implementation

Attachments