I am having an issue with the content of a label being automatically inserted as a watermark inside an input. I have tested this on a range of phones and browsers but it seems to only happen on the HTC EVO (3D X515A). When I give it focus (e.g. touch the input) the text disappears, similar to the placeholder attribute of an input. There is also no auto-population with js.
I have tried searching to see if this is a new standard on Android browsers but have come up with only one reference to the issue which was closed over a year ago with no solution: https://github.com/jquery/jquery-mobile/issues/382
Here is the label and input code:
<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
<label for="phone">Confirm your Valid Cell Number:</label>
I will have to take a picture of the phone's display if anyone needs to see the issue because it does not happen on my emulator.
UPDATE: Removing the input identifier on the label (for="phone") solves the problem, but is not syntactically correct. Seems to be a weird bug, or "feature" on HTC browsers.
I ran into another big problem with the HTC browser. When you autofocus on an input the browser will apply its own style regardless of your css. It removes the border and background color and the input looks empty and almost invisible (if not for the blinking cursor). Using the :focus pseudo-class and other -webkit selectors don't work to override the browser's styles. There's another question on here describing this issue with no clear answers. Closest I can get to a workaround is removing the style from the input and wrapping it in a div.
I fixed this by adding line breaks before the text in my label like so:
<label for="phone">
Confirm your Valid Cell Number:</label>
<input type="number" name="phone" id="phone" minlength="10" maxlength="10" inputmode="latin digits" required="required" />
The browser is actually rendering the text (including whitespace) from the label in the input. What a bizarre/stupid bug!
you can fix this by adding the following css
-webkit-user-modify: read-write-plaintext-only;
Related
I have a basic textarea looking like this:
<textarea class="text-input__input"
name="message"
placeholder="{{'incidents.input_placeholder' | translate}}"
rows="1"
minHeight="21"
required
#textInput
[(ngModel)]="message">
</textarea>
used for a website. When typing in this textarea on an Android device using Chrome on landscape mode the cursor is reset at the start of the input at every character typed. Thus if we type "hello" this comes out as "olleh". This behavior is observed only on Android devices and only on Google Chrome, it works fine on Firefox. The textarea behaves normally on emulator and on iOs devices.
I tried to switch off autocorect but it didn't help.
Any idea where this might come from ?
I found the solution, it appears that the textarea has a really weird behavior when it's container reaches a height of 0px. I'm not quite sure where this might come from but adding min-height: 1px to the container of my textarea fixed the issue.
I'm using the :before pseudo class to add an icon to a hyperlink by giving it specific font-family and content properties. In addition, the :before selector has a padding-right (or margin-right) so that the icon doesn't sit flush against the text. In all browsers except for my S4 cell phone, the padding-right works. I cannot find any documentation or support for getting the S4 to render the icon spacing properly.
Has anyone else ran into this and if so, did you obtain a fix?
<a class="icon-star"> This is a start icon </a>
There's a problem that shows up on a Nexus 7 in which font-size: isn't working properly in a p:first-letter selector.
p:first-letter {
font-size:1.3em;
font-weight:bold;
color:#662020;
}
Screen shots from the Nexus 7 Chrome below. On the left is it in landscape orientation and looks as expected with the first letter larger. On the right the same page in portrait mode. Note the first letter, "V" has become smaller than the rest of the text. I tried setting font-size:130% and it looks the same, too small.
There are also similar problems with p:first-line that are probably related. I only see these issues on Android devices.
Any clues how to fix this (some meta viewport magic or something) or a work around?
This looks like it might be Font-boosting. Chrome will look at the page and work out if it needs to boost the font-size to make the text readable, in this case there is a chance that it is boosting the copy higher than the :before font-size.
Make sure you have a viewport set: and that should limit the effect of font boosting.
If you can also provide a demo site that will help me diagnose it further
Yes, there's a known bug: http://crbug.com/253763 (feel free to star it).
I'm a little confused by your screenshots though, because when I view vijayanderson.com/bio on a Nexus 7 everything looks fine. What version of Chrome are you using (Settings > About Chrome), and what do you have Settings > Accessibility > Text Scaling set to?
This is response to #Kinlan - it's long and so I made it an answer instead of a comment.
"font-boosting" - I knew it was happening but didn't know what it was called. If you want to look at the live site it's http://vijayanderson.com/bio.
The meta viewport is a standard one:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It seems like a bug in font-boosting in that it doesn't boost p:first-letter and p:first-line. It will appropriately boost a span with enlarged font in the paragraph, so a replacing p:first-letter with a span will look right, but is not the right fix.
I do not want to disable font-boosting, I think it adds usability. Thanks for your response.
Our client requested a website, but didn't want to pay for a mobile version. We still are making it work on mobile. When zoomed all the way out, Chrome on Android (4.0) is scaling a bunch of the text. We have tried setting the -webkit-text-size-adjust:none property, but it seems to be ignored and text is still being scaled up.
Works fine on iOS.
Any suggestions?
Just discovered a workaround for this. Set a max-height on a parent element of the text to be much larger than it would ever appear. For example,
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
p.intro {
max-height: 5000em;
}
You can set the max-height on any parent element. It doesn't have to be the first parent. For example,
<footer class="primary">
<p class="intro">
This is some text that is appearing blown up
and ridiculous on Chrome Mobile.
</p>
</footer>
footer.primary {
max-height: 5000em;
}
Note that the -webkit-text-size-adjust property you mention is non-standard. Read more about it here.
Currently Chrome for Android scales text using font boosting and there's no way to disable it.
If you want a way to disable font boosting, please provide your use-case and log an issue via new.mcrbug.com.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> in the <head> tag could disable zoom
I had the same issue with Firefox on Android.
The solution for me was to add the style "float: left;" to the div containing the problem text.
You might need to set the width of the div to the same as the parent (in pixels or 100%) to ensure it doesn't affect the rest of the divs.
See How to prevent mobile browser from resizing text
-webkit-text-size-adjust:none is so horrible!
I have poor eye site and constantly have my pages at 200% default zoom. With -webkit-text-size-adjust:none, I cannot read anything, and my only alternative is to use Firefox. It's my number one problem these days when browsing.
Too many sites use this, especially embedded Facebook comments on web pages. You should stop using it and create an interface that will work with any-sized font.
i've faced some strange problem with absolutely positioned divs and text inputs.
For example(just some short snipped):
<div><input value="normal"/></div>
<div style="position: absolute;"><input value="positioned"/></div>
The trick here is that you can easily input any symbol in 'normal' field but you can't do this in 'positioned' field - for example, you could type english text but danish or japan letters are just ignored...
Has anyone solved similar problem?
P.S. It's tested on PhoneGap
UPD. More tests tells that problem is somehow bounded with focus problem on 'positioned' element.
OK, i don't know why but the problem was in this css rule
html, body{-webkit-font-smoothing: subpixel-antialiased;-webkit-backface-visibility: hidden; overflow: hidden; /* Force webkit to use sub-pixel antialiasing */}