Why Is Text in Disabled Form Elements Not Rendered in Black in Safari

Disabled input fields are not rendered properly in safari

After a lot of trial and error it turns out that this error is only caused, when an empty object is instantiated and rendered before the actual data comes in from the server.

The displayed client was instantiated, so that I could safely bind to the members without checking for null/undefined.

client: Client = new Client();

The component with the form was rendered, and then the input was overwritten by the result of an http request.

For some reason, iOS Safari does not calculate the height properly in case the inputs are empty when they are first rendered.

The solution therefore was to query if the object exists and only render it once there is something to display, so a simple *ngIf fixed the issue.

This is just a workaround, but in case someone else comes across this issue, I hope this helps.

Disabled input text color on iOS

-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */

text field not working in safari

Your problem lies in calcstyle.css here:

* { 
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

I'm not entirely sure why user-select: none; would prevent you from typing into an input but removing this block fixes it for me.

---

EDIT

Here is a possible solution:

Select everything but your inputs...

*:not(input.field) {    
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Text-Shadow in Safari getting cut off/not rendering beyond element border

If it's visible during transform, add -webkit-transform: translateZ(0); to it. Should work. Are you sure the element that cuts it doesn't have overflow:hidden, though? Another thought: is it possible that the element that cuts the shadow is 3d-tranformed? If it is, that's the cause. It's acting as viewport for all children. If none of the above works, I can't help you without a Minimal, Complete, and Verifiable example. Reproduce the bug here. – Andrei Gheorghiu Apr 19 '17 at 13:13
1

Solution

-webkit-transform: translateZ(0); along with explicitly inlining display: block; (didn't seem to work if it was in my .css file) fixed this for me. Thanks for the suggestion! Sorry that I didn't provide more code as an example, but the post might have grown too long. Safari feels like one jungle of a browser sometimes... – Starcat Apr 20 '17 at 0:03

Font color discrepancy between desktop Safari/Chrome and mobile Safari

I came accross something similar and this is what worked for me:

input{
   -webkit-text-fill-color: rgba(0, 0, 0, 1); 
   -webkit-opacity: 1; 
   color: rgba(0, 0, 0, 1); 
   background: white;
}

I think it has something to do with WebkitTextFillColor.

See this issue, too.

Styling of disabled input elements - discrepancy between Chrome and Firefox

Please check this link for the answer:

How can I fully override Chromium disabled input field colours?

Short answer: set -webkit-text-fill-color: black

Safari CSS Font Color issue

This is the only solution I found that works on FF, Chrome, Safari and Safari Mobile. Cheers!

input[disabled], textarea[disabled],
select[disabled='disabled']{
   -webkit-text-fill-color: rgba(0, 0, 0, 1); 
   -webkit-opacity: 1; 
   color: rgba(0, 0, 0, 1); 
   background: white;
}

How can I fully override Chromium disabled input field colours?

I don't know why that happens, but I suspect WebKit is trying to be smart with respect to letting the user know the <input> is disabled.

You can workaround this by also using the -webkit-text-fill-color property:

input.black {
    color: black;
    -webkit-text-fill-color: black
}

Please, make sure you're setting the colour to something that makes it apparent that the <input> is disabled.

Here's your demo, modified with the new property: http://jsfiddle.net/thirtydot/wCFBw/38/

---

Related Topics