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

[JonathanNakandala]

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.

[lasseklovstad]

In an app I am making we use the multiTemplateDataRows to make expandeble rows. It works perfectly on my iphone, IOS 12.2.
But the example doesn't work for some wierd reason...
"@angular/material": "^7.3.1"

[flipZomb]

The expandable row feature (also the example on the material web site) is also _not_ working in EDGE and IE11.

Was working ok in Material 7.3.3

[michelforget]

I wanted to add a few notes about this; the same example titled "Table with expandable rows" on https://material.angular.io/components/table/examples works correctly on Chrome, but not on Edge.

Additionally, when I ran into this issue in my own project, I spent quite a bit of time trying to diagnose it and the change that causes the break appears to be upgrading Angular itself (ie: not material). The following configuration works in Edge:

"@angular/animations": "~7.2.0",
"@angular/cdk": "^7.3.3",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/flex-layout": "^7.0.0-beta.23",
"@angular/forms": "~7.2.0",
"@angular/material": "^7.3.5",
"@angular/material-moment-adapter": "^7.3.5",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"moment": "^2.24.0",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"

If I upgrade angular/core to 7.2.11, the break happens.

[MasterBroki]

Hi there, I'm using 7.3.6, it's still broken. No errors in the console, just not working. My angular configuration is quite similar to michelforget's

"@angular/animations": "^7.2.11",
"@angular/cdk": "^7.3.6",
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/material": "^7.3.6",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.1.0",
"@types/faker": "^4.1.5",
"classlist.js": "^1.1.20150312",
"cordova-browser": "5.0.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^3.1.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"core-js": "^2.5.4",
"dateformat": "^3.0.3",
"faker": "^4.1.0",
"hammerjs": "^2.0.8",
"luxon": "^1.12.0",
"moment": "^2.24.0",
"ng2-dragula": "^2.1.1",
"ngx-material-timepicker": "^3.0.2",
"rxjs": "~6.3.3",
"web-animations-js": "^2.3.1",
"zone.js": "~0.8.26"

[OlufemiOyewole]

In the Chrome browser, since @angular/[email protected] update, the Expand animation stopped working in StackBlitz and in my application also.
https://stackblitz.com/angular/ggyqlbaorjl?file=app%2Ftable-expandable-rows-example.ts
Chrome: Version 74.0.3729.108 (Official Build) (64-bit)

[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

[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._}