So this is a doozy...
Our QA department reported a bug that only exists in Chrome in Windows 8. Works fine in all other browsers on all other platforms. The bug? Text within a span element drops down well below where it should be placed, almost the entire height of the element trying to be aligned.
I was working from home when this was reported, so I actually freshly installed Windows 8 on my iMac and installed the latest Chrome -- same version tested by QA -- but could not reproduce the bug. Everything aligned perfectly. Tried every possible screen resolution available and all was great.
So I'm back in the office today, and a QA guy handed me the laptop with Windows 8 installed, and wouldn't ya know it? The text is not aligning properly. It's a Lenovo Ultrabook. The one difference, though: a touch screen. But even disabling the touch screen (and verifying through the dev console that Chrome no longer recognizes the touch screen) didn't fix the problem.
Neither Chrome installation had any add-ons.
What should I be looking for?? Here's the code:
<div id="text_container">
<span style="padding:0x;" class="textName" id="text_page">Problem Text Is Right Here</span>
</div>
Now...the "text_container" CSS consists of:
margin: 0;
padding: 0;
width: 1024px;
"textName" is defined with:
font-size: 10em;
margin-left: 1.55%;
opacity: 0.7;
position: absolute;
text-transform: uppercase
top: 0.8em;
#text_page has no CSS defined. Again, all looks PERFECT except on the one Windows 8 device on Chrome, a touchscreen laptop that doubles as a tablet.
Thanks for your help, folks. Even though the suggestions didn't help, I still appreciate the time.
Anyway, I fixed the issue, and yes, it was based on my observation that the font size was measured in "em". Now, I've been doing web site programming of some kind of another for literally twenty years, and this definitely falls under the "learn something new every day" category...
I always use "px", but again, the person who coded this wanted the font to be scalable, so "em" was the way to go. Now, what I didn't know was that "em" calculates itself based on the base font size...and since the base font size wasn't defined, I guess it's up to the browser to decide on what the base font size should be. Using the dev tools, it seems that the browsers were defaulting to 16px as the base font size...
...except for Chrome on the Windows 8 laptop we have, which was setting the base font size to 24px. Upon further examination, the laptop has a pretty freakin' high screen resolution: 3200 x 1800, so I'm guessing that had an effect on it somehow. It would also explain why I couldn't reproduce the problem on Chrome in Windows 8 on my iMac -- my iMac only goes up to something like 1920 x something, so I couldn't get nearly the screen rez.
So I went into the CSS and set the body's font-size attribute to 16px, and that fixed the problem.
May be the default value of the vertical-align property on your span tag is not set, so it is defaulting to "baseline".
According to the HTML spec, <span> is an inline element and <div> is a block element. Now that can be changed using the display CSS property but there is one issue: in terms of HTML validation, you can't put block elements inside inline elements so:
<span>...<div>foo</div>...</span>
is not strictly valid even if you change the <div> to inline or inline-block.
So, if your element is inline or inline-block use a <span>. If it's a block level element, use a <div>.
Related
I'm working on a responsive website and when checking it on my iPhone (iOS 13, June 2020) I found that the font size was different between Safari and Chrome.
I tried several things to account for it, but had trouble finding the cause.
I suspected it was related to some CSS I had from long ago: -webkit-text-size-adjust: 100%; Removing and changing this value had no effect on the difference though, so it was a red herring.
What would cause a discrepancy between the rendering of the same site and CSS on these two apps?
Here are two potential causes, there are surely more, but these were the ones I found and solved my problem.
Chrome obeys the system-wide "Text Size"
If you use the "Text Size" slider in control center, or the related settings at the system level, Chrome automatically alters the text of sites!
From what I can tell, there's no setting in Chrome for iOS to disable this linkage with Text Size.
So if you want Safari and Chrome to match, make sure that the Font Size state of your phone is in the middle position that's marked as "Default".
Good to know both in case you use the Text Size controls day-to-day like I do, or your users or clients do!
Safari has a "Page Zoom" setting in Settings app
On the other side, Safari has a setting called Page Zoom that goes from 50% to 300%. It's found in the Settings app under Safari > Settings for Websites > Page Zoom.
This setting can cause total chaos with CSS layouts at sizes like 200%.
Either way, if there's a discrepancy between the two apps, this Page Zoom setting is worth checking out as well.
Thank you for pointing me in the right direction - I've been having horrendous problems working out why Chrome on my iPhone SE was rendering text larger than Safari!
I don't seem to have a "default" setting for Text Size (Settings > Display & Brightness > Text Size).
However, -webkit-text-size-adjust: 100% did work for me - at least for Chrome which was where I was struggling.
In iOS 13, Safari exposes the media font-size to the final user, it means that in your root page (html tag) the css "font-size" rule is overrided, forced by the user and not possible to change.
And Chrome for Safari is not using rendering engine "Blink" as for Android, it's using Safari webKit render engine, so, Chrome for iOS is "Safari"
Anyway, you can react to this adjusting your media queries to work with "em" units instead of "px" in other words:
Change bootstrap (if used) breakpoints to "em" instead of default pixels.
Make your components border, paddings and other stuff pixel based.
Another way is understand what are the users needs and react before they need to adjust the font-size:
Adjust font size based on viewport (css clamp)
Use responsive layout
Use css border-box, box-shadow...
Another way is recalculate everything, at much cost:
What if the user changes the root’s font size?
I had a weird problem with paragraph on iOS14 ,13, it was enlarged, this has worked for me for Safari and Chrome:
-webkit-text-size-adjust: none;
I hope it will help someone too.
Link in question: http://goo.gl/w5Vxu7
If you open this link on desktop computer, the vertical aligns are good.
However, on my cellphone, it is not:
This screenshot is taken from chrome://inspect with my Nexus 6 connected, it is exactly same with the appearance on my phone. You can see the first line is obviously dispositioned.
The small icons are Material Icons, related HTML and CSS are:
<div><i class="material-icons">today</i>2012-12-25</div>
<style>
html{font-size:15px;font-family:Microsoft Yahei}
div{font-size:1rem;line-height:1.5}
i.material-icons{line-height:1.4;vertical-align:bottom;font-size:inherit !important}
About that vertical-align:bottom, it looks a little weird not using vertical-align:middle, but I've always had vertical align issues with material icons, especially when accompanied with Chinese characters, which don't have baselines, and I've tried numerous different combinations of line-height,font-size,vertical-align,font-family for both the div and i.material-icons and decided this combination as shown above is the best.
I am quite obsessed with this issue and poured in lots of efforts trying to solve it. Until later I found out this only happens on my Nexus 6. On iPhones and other android phones there is no such problem. Even on my Nexus 6, if I use other browser instead of Chrome, there will be no problem; and even with Chrome, landscape view has no problem, the disposition only happens on portrait view of chrome on Nexus 6. I have only tested so far, but this still could be a potential problem for some mobile devices in some special environment, so it is still not an issue I can simply ignore. And this is where I can use some of this community's knowledge and experience - what could possibly be causing this behavioral discrepancy?
Vertical align MDI (MaterialDesignIcons)
The provided link currently returns a white screen, so I can't test your CSS.
The problem with the material-icons shouldn't be solved with a strange combination between height, line-height, padding and so on; explore new attributes. In my case, the following CSS solved the problem.
.material-icons{
display: inline-flex;
vertical-align: baseline; /* or middle? */
}
If the code above doesn't work, try different display properties.
Worth a try
My first thought was your use of rem, "older" browsers doesn't support it (can I use). It is still strange that it works in landscape, but try to define all measurements in a safe unit.
Another (problem)
If you want to support older browsers, you shouldn't write the icons in English, IE9 and below won't support it. Use the alternative solution instead (example below).
<i class="material-icons">today</i> /* do not use */
<i class="material-icons"></i> /* do use */
If you click on the icons and select "<> Icon font", you will be able to copy the html for older browsers.
If the information above don't help you, please fix the link (and tell me) and I will check if I can recreate the problem.
I'm having a tricky CSS issue. This is exacerbated by the fact that the CSS for the "theme" of the web site is third-party (it can't be changed, but we can override with another stylesheet), and everything on the page uses absolute positioning for layout and sizing (this cannot be changed).
Somewhere in this third-party CSS, we have this declaration:
body {
line-height: 1.3;
}
A div on the page has a font-size of 14px, making its line height 18.2px. This is fine for typical web sites. However, since everything is positioned absolutely using pixel positions, font rendering differences are coming into play. Specifically, Google Chrome in Windows is rounding this line-height down to 18px. This means that the large block of content in the div renders substantially shorter in Chrome for Windows than in any other browser. All other browsers seem to support sub-pixel line heights.
Is there any way to force Chrome for Windows to respect sub-pixel line heights so that it doesn't render so differently than other browsers?
Update
Here's a JSFiddle demonstrating the difference. If you compare the heights in Chrome for Windows and, say, Firefox for Windows, you'll see that there's a 0.2px difference per line.
What I would do is changing the line-height to something that multiplies up to a whole pixel. In your case:
line-height: 1.2857142857142857142857142857143; /* = 18 / 14 */
This changes the output only a little, and results in cross-browser compatible result.
I've tested it with your fiddle on Chrome and Firefox on Windows and it works.
Imagine CSS like:
.x {
background: blue none;
border-radius: 6px;
}
and HTML like:
<div>Words and <span class="x">decorated</span> words</div>
The height of the span reading 'decorated' is going to vary wildly between different browsers, and between different OSes running otherwise the same browser.
Is there any way to make it be the same height?
(I don’t want to move to inline-block or sacrifice the text using exactly the same baseline.)
My experience with avoiding of different height is setting exact line-height and font-size
Sounds like there is something else causing your problem. I just tried a basic html5 document with the snippits from your question and compared the alignment on Windows with Chrome, Safari, FF & IE. They all rendered exactly the same except for IE9 which had a 1px gap above the span only.
Granted Mac renders fonts differently from Windows, and I didn't test on linux or mac, but 9px!!!??? Here are some things I'd investigate:
First, try a basic test file if you are working in a larger project, this will limit your variables.
Second, try setting explicit fonts and ensuring they exist on all of your test machines - perhaps linux is falling back to a different font.
Third, make sure you are not zoomed in or using a custom font size browser setting on any of the browsers (I ran into this one a while back where somehow my IE was set to 105% zoom.)
Finally, if all of that fails, you might want to try using a web font (#font-face) and see if that renders more strictly.
Edit:
In lieu of the new information in your comment, another strategy would be to use JavaScript to inspect the rendered heights of some off-screen elements and then programmatically adjust styles accordingly. You'll probably get a huge FOUC, but you can use a whiteout div to minimize the shift.
I am NOT talking about zooming the page, but rather the way MobileSafari on iOS automatically bumps up some font sizes sometimes.
When, exactly, is this done? Can it be prevented or discouraged?
body {
-webkit-text-size-adjust: 100%;
}
Just make sure all your text is at a legible size in the first place. The iPhone and iPod touch have a rather small screen, so keep that in mind too.
Had a lot of trouble tracking it down, but: it’s the -webkit-text-size-adjust property in CSS.
Values:
Percentage (of default size), e.g. 120%, or 100%
auto (the default)
none – if auto isn’t working for your page. However this often causes problems with zooming. Use 100% instead. For example, open Safari on your desktop and zoom the page (Command-Plus) – your text won’t be enlarged, even though the entire page has zoomed! Don’t use none!
Note that these can be applied not just at the page level but at the element/widget/container level.
(I would not just specify a value of 100% for my website unless I was damn sure it was already optimized for small screens, and never none since it causes problems.)
Please note that in Firefox Mobile (e.g. for Android and Firefox OS) there is a similar property, -moz-text-size-adjust, documented here. Thanks to Costa for pointing this out.
Update, 10 years later: This MDN page is probably best for checking what browsers' current compatibilities and vendor prefixes are for this property.
The accepted answer works, but in other webkit browsers it locks in the font-size for people that are zooming. Using 100% instead of none works both ways:
body {
-webkit-text-size-adjust: 100%;
}