Components: Strange border on the first and last <mat-expansion-panel> children of <mat-accordion> when using the Chrome browser

[asmolenic]

What is the expected behavior?

Identical look and feel across all major/known/usual browsers.

What is the current behavior?

Currently when using the Chrome browser I get strange looking <mat-expansion-panel> borders, more specifically on a <mat-accordion>'s first and last <mat-expansion-panel> elements during their collapsed state.

What are the steps to reproduce?

The issue can be observed at https://material.angular.io/components/expansion/examples on the collapsed <mat-expansion-panel> elements when using the latest version of Chrome (71.0.3578.98 (Official Build) (64-bit)).
https://www.screencast.com/t/HWwmpIfA6ksg

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

The issue seems to be related to "@angular/material" 7.2.0 as it can be observed in the official documentation pages. I've only been able to detect this issue using Chrome (71.0.3578.98 (Official Build) (64-bit) on my PC. On the mobile Chrome browser the issue is not manifesting.
The issue is NOT manifesting on IE 11.472.17134.0 (update versions 11.0.101), Microsoft Edge 42.17134.1.0 and Firefox 64.0 (64-bit).

Is there anything else we should know?

It seems like the box-shadow of the first and last <mat-expansion-panel> elements is somehow shifted towards the bottom-right corner as it is too thick on the bottom and right side of those <mat-expansion-panel> elements and it is not present almost at all on the left side.

[asmolenic]

Has anyone else encountered this issue? Can anyone reproduce it? One would only have to visit https://material.angular.io/components/expansion/examples and play with the examples

[sambaptista]

I confirm on chrome 71.0.3578.98 and angular material 7.1.1. I can reproduce on the demo stackblitz (simply by adding a third panel) and on my local project.

[earshinov]

I experience a related issue of missing shadows on expansion panel elements in collapsed state except for first and last.

StackBlitz: https://stackblitz.com/edit/angular-material-expansion-panel-shadows

Chrome 71.0.3578.98 (Official Build) (64-bit)

[sambaptista]

In fact, the shadow is on the left on all but first and last items.

[earshinov]

Did anyone find a related issue in the bug tracker of Chrome (https://bugs.chromium.org/p/chromium/issues/list) or perhaps file a new one? This case is easily reproducible and could help Chrome devs to fix the bug.

[asmolenic]

Did anyone find a related issue in the bug tracker of Chrome (https://bugs.chromium.org/p/chromium/issues/list) or perhaps file a new one? This case is easily reproducible and could help Chrome devs to fix the bug.

I didn't file a new bug as I don't know yet where the issue originates from, Chrome or Angular Material.

[earshinov]

Here is the bug: https://bugs.chromium.org/p/chromium/issues/detail?id=878195.
Should be fixed in Chrome 72.

[earshinov]

For reference, here is a screenshot taken programmatically in Chrome 66:

Script (index.js):

const puppeteer = require('puppeteer');

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
};

(async() => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({width: 640, height: 480})
    await page.goto('https://angular-material-expansion-panel-shadows.stackblit$
    await timeout(20000)
    await page.screenshot({path: 'example.png'});
    browser.close();
})();

Script requirements:

1. NodeJS
2. npm package puppeteer for the required version of Chrome (https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md)

[asmolenic]

Chrome 72 has landed and the issue seems fixed. Can anyone else confirm so I can close the issue?

[fjauer]

it works for me (Chrome 72.0.3626.96)!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}