{"action":"opened","issue":{"url":"https://api.github.com/repos/angular/material/issues/7958","repository_url":"https://api.github.com/repos/angular/material","labels_url":"https://api.github.com/repos/angular/material/issues/7958/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/7958/comments","events_url":"https://api.github.com/repos/angular/material/issues/7958/events","html_url":"https://github.com/angular/material/issues/7958","id":147026816,"number":7958,"title":"Floating Input Label disappears on iOS + Cordova","user":{"login":"betorobson","id":13212208,"avatar_url":"https://avatars.githubusercontent.com/u/13212208?v=3","gravatar_id":"","url":"https://api.github.com/users/betorobson","html_url":"https://github.com/betorobson","followers_url":"https://api.github.com/users/betorobson/followers","following_url":"https://api.github.com/users/betorobson/following{/other_user}","gists_url":"https://api.github.com/users/betorobson/gists{/gist_id}","starred_url":"https://api.github.com/users/betorobson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/betorobson/subscriptions","organizations_url":"https://api.github.com/users/betorobson/orgs","repos_url":"https://api.github.com/users/betorobson/repos","events_url":"https://api.github.com/users/betorobson/events{/privacy}","received_events_url":"https://api.github.com/users/betorobson/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-04-08T20:06:53Z","updated_at":"2016-04-08T20:06:53Z","closed_at":null,"body":"I'm developing an app based on Cordova and I got a strange behaviour on iOS. \r\nAfter a input get focus the related floating label disappears.\r\n\r\nHere a screen record demonstration:\r\n![angularfloatinglabel-ios-bug](https://cloud.githubusercontent.com/assets/13212208/14395936/1a929a32-fdab-11e5-804d-715c8f2b504b.gif)\r\n\r\nAnd here a codepen code similar to what I have here.\r\nhttps://codepen.io/betorobson/pen/XdVyjo\r\n\r\nI believe this bug is related to css translate 3d which is used to give an scale effect on floating labels. iOS can turn off this css property sometimes in order to save GPU and also ignore render elements using this property.\r\n\r\nI have been looking for a any issue related to this but, I couldn't found anything. So, I made by myself a CSS Fix only for iOS to reproduce the same effect. Have a look on my next screen record demonstration:\r\n\r\n![angularfloatinglabel-ios-cssfix](https://cloud.githubusercontent.com/assets/13212208/14396053/c9a02026-fdab-11e5-86ea-6f8993a1ea31.gif)\r\n\r\nAnd here a codepen code with my css fix.\r\nhttps://codepen.io/betorobson/pen/VayqLb"}}