Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Input value from Cache is turning Yellow & blurry #2260

Closed
KSanthanam opened this issue Apr 11, 2015 · 5 comments
Closed

Input value from Cache is turning Yellow & blurry #2260

KSanthanam opened this issue Apr 11, 2015 · 5 comments
Assignees
Labels
for: internal contributor The team will address this issue and community PRs are not requested. needs: review This PR is waiting on review from the team type: bug

Comments

@KSanthanam
Copy link

I have the email address input inside md-container. If the input is selected from the cache then the field is turning Yellow & blurry. If I add a character or remove a character and re add the yellow goes away.
My html & signin.modelOptions = {updateOn: 'default blur'};
<md-input-container layout-fill>
<label>Email</label>
<input name="emailAddress"
form-name="signinForm"
required
ng-model="signin.credentials.email"
ng-model-option="signin.modelOptions"
placeholder="Email" type="email">
<span layout-fill
ng-messages="signinForm.emailAddress.$error">
<span layout-fill ng-message="required">Email is required</span>
<span layout-fill ng-message="email">Must be a valid Email address</span>
</span>
</md-input-container>

  1. Select from the history
    screen shot 2015-04-11 at 11 07 35 am
  2. Selected
    screen shot 2015-04-11 at 11 07 47 am
  3. add a character.

screen shot 2015-04-11 at 11 07 55 am

@ThomasBurleson
Copy link
Contributor

@KSanthanam - Please provide a CodePen or Plunkr that demonstrates this issue.

@ThomasBurleson ThomasBurleson added this to the 0.9.0 milestone Apr 11, 2015
@ThomasBurleson ThomasBurleson self-assigned this Apr 11, 2015
@O-Mutt
Copy link

O-Mutt commented Apr 12, 2015

This is most likely due to the autofill from chrome. It is a bug in how chrome deals with populating fields with stored data. I could find the bug if you need.

It is actually the placeholder being slightly off from the input

@KSanthanam
Copy link
Author

@ThomasBurleson. Sorry my code is reorganised into components. I am not able to replicate on Plunker without the folder structure needed for the components. Can I give you the components code, would it help. I reckon it is the angular-material/angular-animate issue. If you need I can send you the component code.

@Mutmatt There are two issues. 1) The blur & 2) the yellow background.

@ThomasBurleson ThomasBurleson modified the milestones: 0.10.0, 0.9.0 Apr 12, 2015
@Antariano
Copy link

The problem is chrome's autofill having, by default, a yellow background.
There's to parts here to fix:

  1. Yellow background. You can fix this with
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px <your-bg-color> inset;
}
  1. Shadow (which appears as a blur)
input:-webkit-autofill {
   text-shadow: none;
}

However there's also accessability to consider. The yellow background is a universally recognized style for chrome users and overwriting it should only be done for very valid reasons. :)

@ThomasBurleson ThomasBurleson modified the milestones: 0.10.0, 0.11.0 Jun 16, 2015
@ThomasBurleson ThomasBurleson modified the milestones: 1.0-beta1, 0.11.0 Jul 31, 2015
@ThomasBurleson ThomasBurleson added for: internal contributor The team will address this issue and community PRs are not requested. for: external contributor needs: review This PR is waiting on review from the team labels Jul 31, 2015
@naomiblack naomiblack changed the title Input value from Cache is turning Yellow & blury Input value from Cache is turning Yellow & blurry Aug 14, 2015
@naomiblack
Copy link
Contributor

dup of #1376

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
for: internal contributor The team will address this issue and community PRs are not requested. needs: review This PR is waiting on review from the team type: bug
Projects
None yet
Development

No branches or pull requests

5 participants