Input placeholder doesn't go above the real input

Bug, feature request, or proposal:

bug

What is the expected behavior?

the input placeholder works as it has worked before, and goes above the real input when I start to type anything

What is the current behavior?

Is there anything else we should know?

It has worked a few hours ago even on my prod deployment, now without any modification on it just simply doesnt work as it should.

current versions: "dependencies": { "@angular/animations": "^4.4.0-RC.0", "@angular/cdk": "^2.0.0-beta.10", "@angular/common": "^4.4.0-RC.0", "@angular/compiler": "^4.4.0-RC.0", "@angular/compiler-cli": "^4.4.0-RC.0", "@angular/core": "^4.4.0-RC.0", "@angular/flex-layout": "^2.0.0-beta.9", "@angular/forms": "^4.4.0-RC.0", "@angular/http": "^4.4.0-RC.0", "@angular/material": "^2.0.0-beta.10", "@angular/platform-browser": "^4.4.0-RC.0", "@angular/platform-browser-dynamic": "^4.4.0-RC.0", "@angular/platform-server": "^4.4.0-RC.0", "@angular/router": "^4.4.0-RC.0", "angular-froala-wysiwyg": "^2.7.0", "angular2-infinite-scroll": "^0.3.4", "angular2-masonry": "^0.4.0", "angular2-moment": "^1.7.0", "angular2-tinymce": "^2.1.2", "angularfire2": "^2.0.0-beta.8", "core-js": "^2.4.1", "firebase": "^3.8.0", "firebase-functions": "^0.6.3", "hammerjs": "^2.0.8", "imagesloaded": "^4.1.3", "ng-select": "^1.0.0-beta.5", "ng2-filter-pipe": "^0.1.7", "ng2-tag-input": "^1.2.2", "ngx-modal": "0.0.29", "ngx-pagination": "^3.0.0", "ngx-sharebuttons": "^3.0.0", "rxjs": "^5.0.1", "tinymce": "^4.5.5", "ts-helpers": "^1.1.1", "typescript": "^2.5.2", "zone.js": "^0.7.2" }, "devDependencies": { "@angular/cli": "^1.3.2", "@angular/compiler-cli": "^2.3.1", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.3.0", "typescript": "~2.0.3" }

It is really annoying, because as I said it has worked a few hours ago, and I didn’t modify anyhing related to this, and now it is not working on any of my pages… please help.

It may help if someone tell what is responsible for the animation, and/or move placeholders up.

[ianzimmerman]

I was having the same issue, but solved it by updating my theme css:

https://material.angular.io/guide/getting-started#step-4-include-a-theme

[GeorgeKnap]

I am experiencing this on first page load. But when I come back to the component, the animation works correctly. I’m using version 6.0.1 it didn’t work in 6.0.0 too. The form is not anything special, just a simple reactive form with two form fields for login. I can share some of the code but I really don’t know which part.