I have a button class anchor CSSed as follows:
.button {
display: inline-block;
width: 8.0em;
text-align: center;
text-decoration: none;
background-color: #840;
letter-spacing: 1px;
line-height: 2.2em;
padding: 0.5em 0.2em;
border: 4px solid #420;
}
See below for an example with FAQ tapped.
It doesn't happen reliably, but typically only the first time a button is tapped, sometimes when you go back the button is back to normal, other times it is wider, other times it looks larger (meaning width, height and font are larger), other times all the buttons look smaller!
If you want to try it out, you need to use Safari on an iPhone -- iMac and iPad seem to work okay.
I had a similar situation lately on the iPhone (well itouch but it is using the same iOS) I had a paragraph that for some unknown reason the text was reflowing and becoming bigger than the heading text. But rotating the device the text reflowed and changed size. I fixed it with this:
-webkit-text-size-adjust: 100%;
I found this answer originally here:
Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others?
Hope that works for you.
Related
I've set a font-size on all of my input elements and also a line-height of 1.25. For some reason, on mobile web (currently trying with Android Chrome) the blinking cursor is much shorter than the text itself, and results in the text getting cut in the middle when the user is actively entering input. The actual text itself ends up being fine after the user exits the input (doesn't get cut off). How can I make sure that the cursor matches the real size of the text? I attached a picture for reference.
On desktop web browsers (Windows, Mac + Chrome, Safari, Firefox) it's totally fine and I don't experience this issue, although apparently on Firefox Linux the same issue pops up.
Code so far:
.input-class {
background-color: #eeeeee;
border-color: transparent;
border-radius: 10px;
box-sizing: border-box;
padding-left: 0.5rem;
line-height: 1.25 !important;
vertical-align: middle;
width: 100%;
}
.input-class::placeholder {
overflow: visible;
}
.input-class:focus {
outline: none;
}
input {
box-sizing: content-box;
font-size: 1rem;
padding: 0.5rem;
}
<input type="text" class="input-class">
Any comments are appreciated!
I found the issue after doing Remote Debugging with Chrome - highly recommend this in the future if you're also facing some similar issues on mobile. The custom font that I was using was not playing nicely with inputs and textareas on Chrome. I switched to a more common font and the issue went away.
In certain situations html elements that use pixels are not always rendered as imagined, a simple example is when a person adjusts the browser zoom to about "100%", so depending on the position and zoom one element of height equal to the other seems to be a smaller pixel.
One example is the StackOverflow site menu itself, example with "175%" zoom:
Note that the third menu bar appears larger than the others and that the spacing of the first and second bars also appears larger.
This is not just about "zoom", I tested it on a colleague's notebook with Windows10 and GeForce® GTX 1050 card (of course I understand that in part modern computers render with the "integrated card") and it uses in the Windows display settings for the operating system all the value of 125%:
Using this, I realized that the same problem occurs (even with 100% zoom in the browser).
The only displays that I noticed that the problem does not occur are those of retina displays (and similar "technologies"), because they use a higher "pixel density".
But the question is NOT about monitors, displays and market technologies, the question is how to avoid the problem on normal screens when the user adjusts something (like example in Windows10 with 125% on display settings), noting that it varies with resolution and even the monitor and is "unpredictable".
I tried to work with other units of measure (em, pt, rem, %), but the problem persisted.
So here goes my question:
How to prevent pixel rendering on elements from being distorted in display settings that may vary?
An example that the problem occurs (chance adjust the source of the "OS" or the zoom):
*, ::after, ::before {
box-sizing: border-box;
}
body {
background-color: #007bff;
}
.v-navbar-toggle {
vertical-align: middle;
position: relative;
cursor: pointer;
display: inline-block;
background: none;
outline: 0;
border: none;
padding: 10px 8px;
color: #fff;
margin: 0;
}
.v-icon-bar {
background-color: currentColor;
overflow: hidden;
display: block;
width: 24px;
height: 2px;
border-radius: 1px;
}
.v-icon-bar+.v-icon-bar {
margin-top: 4px;
}
<button class="v-navbar-toggle">
<i class="v-icon-bar"></i>
<i class="v-icon-bar"></i>
<i class="v-icon-bar"></i>
</button>
Note: I also noticed that working with svg (depends on how you use it) or icon-fonts works a lot better compared html+css, but what I am trying to solve are problems with simple "html elements".
This is the third time I have faced this problem.
I don't know what is wrong.
Here are two pictures of how it looks like:
On desktops:
On mobile devices:
As you can see on mobile devices text is not aligned center vertically.
Again this problem is only visible on mobile devices.
What is the problem? What did I miss? This problem is also visible in inputs.
I am using the following code for the buttons:
.button
font-family: 'Gotham Pro', sans-serif
font-size: 14px
color: $color-text--button
padding: 10px 15px
text-transform: uppercase
background: $color-button--default
border: 1px solid $color-transparent
Please note, I use padding for setting height of buttons
UPDATE
I have just tested in mobile android Firefox browser, everything works just fine the issue only with Chrome
There is no line-height specified in your code.
Try setting a specific line-height. In addition I suggest, that you center your text via line-height and not via padding. Set a line-height with the same height the button has.
CSS
.button {
height: 40px;
line-height: 40px;
}
This works of course only for single line texts.
Also have a look at this SO question
Did you specify a media query SPECIFICALLY for mobile?
You may need to add
// you can use any other value of screen width mobiles use like 640, 768
#media (max-width:480px){
line-height: 15px; // The line height you want to show on mobile
}
Not all browsers have a default. Almost always I make a habit of setting styles on the body element
body{
font-size: 100%;
line-height: 1.333%;
}
to take care of things like this.
I had to work with a fancy font today and I noticed that it has different line-height rendering on chrome mobile device and chrome desktop mobile emulator (devtools). Which is apparently a bug to be reported for either dekstop either mobile chrome. Changing line-heights is the option to fix but cumbersome if you have many elements. After some digging I figured out this properties
ascent-override: 92%; /* play with values */
descent-override: 10%; /* one might not be needed */
Futhermore as I needed font change for mobile chrome only I tried media query and it worked.
#media (max-width: 1000px) {
#font-face{
font-family:'FancyFont';
src:url('fonts/FancyFont.ttf');
font-weight:400;
ascent-override: 92%;
}
}
I have a very strange problem rendering on iOS Browser Safari (not Safari Desktop, not Chrome Desktop and not Chrome Mobile).
I have some divs, which are draggables by the user. When the use make a "preview" of the content, in iOS Safari Mobile the text is "wrapper" because it not has enough space to paint it, something like this:
Lorem Ipsum Text
Lorem Ipsum <- problem break line not enough space by the border.
Text
The divs:
<div class="text-perfect-correction" style="opacity: 1; font-family: Lato; left: 594px; top: 386px; font-size: 50px; color: rgb(0, 0, 0); width: 472px; height: 103px; position: absolute; display: block;">
<div style="display:inherit;" class="text-div" spellcheck="false">
<p>
<span style="color:#696969"><strong>Lorem ipsum text</strong></span>
</p>
</div>
</div>
The css classes are like this:
.text-perfect-correction {
border-width: 6px;
border-color: transparent;
border-style: dotted;
padding: 5px;
margin: -11px;
}
.text-div {
-webkit-line-break: after-white-space;
display: inline;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
I use the perfect-correction-class because I show some buttons when you click div and a border to show the user which div is selected.
In all the other browsers, I see all correctly:
Lorem impsum text
Lorem impsum text <- No break line
Are any issue about it?
Thanks!!
The problem is not iOS-specific - it's that you're making risky assumptions.
First, let's look at what you've done:
Give the parent element an exact with of 472px
Set font size to 50px
Set font-family to Lato
Assume that your text will always fit on one line with these measuremenets
The problem is that different rendering engines won't always render fonts identically, there might be slight differences, e.g. resulting in a few pixels more width on iOS. Pushing font size to the limit in one browser and just assuming that everything will look ok in others is quite dangerous.
On top of that, there might have been issues with loading Lato making the browser fall back to a different font, which might use more horizontal space.
I copied your code into a JSFiddle, and because Lato isn't imported (and not on my computer), it will render in default sans-serif. In Chrome, the text fits into one line, but on Firefox it breaks after ipsum, too.
Solutions
There are a few approaches to make sure your text will remain on one line.
Prevent line breaks
You can use CSS to prevent white spaces from wrapping, meaning that the whole text will be forced to one line:
.text-div {
white-space: nowrap;
}
JSFiddle
Ellipsis
In addition to above, you can cut off overflowing text with an ellipsis (...):
.text-div p span strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
JSFiddle
Make text smaller
Of course, you can also just reduce font size, so you have enough error margin to prevent problems with slight differences in rendering.
Well I am aware that iOS is a hard browser to design for but from what I can tell your margins may be messing you up. class="text-perfect-correction" has left: 594px; and width: 472px;, and the font size is at 50px, so depending on what iPhone you are viewing it on, there may be a size/margin problem. Test it with less px. That is the problem that I personally have had the most with iOS.
idev101.com
iPhone Design tips
I set up a simple example website to show you the issue that I'm currently fighting with:
http://examplesite.ohost.de/
In Firefox the site is rendering just fine, in the Dreamweaver, on my android phone and I think on other webkit browsers, the navigation bar buttons are cut off on the right and I think the buttons have slightly more width.
Here are some screenshots:
So what do I have to change to get a similar result to the one in Firefox in every browser?
edit:
I now tested it on the newest versions of Safari, Opera and Chrome and they are rendering it correctly.
You could use a fix size for navBtn, something like
.navBtn {
position: relative;
float: left;
line-height: 18px;
font-weight: bolder;
list-style: none outside none;
width: 100px;
}
This maintains element size.