Placeholder text for text areas indent

[kimsaabyepedersen]

Hi
I have created an app with ionic b13 that uses a text area with a placeholder text.

When the text area gets focus, the cursor and placeholder are not aligned correctly.

See photo

[kimsaabyepedersen]

I have also found that setting text-align to 5px (the padding size) fixes the problem (the ion-content has padding="true"):

//ionic.css line 5167
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #aaaaaa;
text-indent: 0;
}

change text-indent to 5x px if padding.

Btw, further up (line 5137) that style sheet this rule defined:
textarea::-webkit-input-placeholder {
color: #aaaaaa;
text-indent: -3px;
}

But that gets overridden by the one further down in the stylesheet.

[kimsaabyepedersen]

Maybe I did not state it clearly but the problem occurs in iOS (version 7.1 - I have only tested that), iPhone (I have only tested that).

[GringoDotDev]

This still occurs for me on beta 14.

[mhartington]

Looking into this.

[WinfredMa]

/* ----------- iPhone 4 and 4S ----------- */
@media only screen
and (device-width: 320px)
and (device-height: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
textarea {
text-indent: -3px;
}
}

/* ----------- iPhone 5 and 5S ----------- */
@media only screen
and (device-width: 320px)
and (device-height: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
textarea {
text-indent: -3px;
}
}

/* ----------- iPhone 6 ----------- */
@media only screen
and (device-width: 375px)
and (device-height: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
textarea {
text-indent: -3px;
}
}

/* ----------- iPhone 6+ ----------- */
@media only screen
and (device-width: 414px)
and (device-height: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
textarea {
text-indent: -3px;
}
}