Table with expandable rows - Example doesn't work on Safari on iPhone

What is the expected behavior?

The rows expand like they do on Chrome and Firefox

What is the current behavior?

On an iPhone’s Safari browser, tapping on a row doesn’t expand the row.

What are the steps to reproduce?

The example of the expandable rows in: https://material.angular.io/components/table/examples doesn’t work on an iPhone. The stackblitx is the same. https://stackblitz.com/angular/gqvrlgbeqkv?file=app%2Ftable-expandable-rows-example.ts

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

Angular 7.2.10 Angular Material 7.3.5

Tested on: iPhone X with IOS 12.1.4 iPhone XS with IOS 12.1.4

iPhone 6S with IOS 9 via Browserstack.com

Is there anything else we should know?

I tried adding import 'web-animations-js'; to the polyfills.ts on my own project and it didn’t seem to do anything.

[eduardoflorence]

I solved it very simply and is now working on all browsers and IOS (iphone). Just remove the “display: none” from the line below: state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})), The line will look like this: state('collapsed', style({height: '0px', minHeight: '0'})), For some reason I do not know the browser is confusing with the display transition, but as the height is zero it will have no influence

[vengadesan123]

Hi All,

I removed transition(‘expanded <=> collapsed’, animate(‘225ms cubic-bezier(0.4, 0.0, 0.2, 1)’)) its working below angular material version 7.3.3