http://jsfiddle.net/7yda75v0/8/
If I open the fiddle on my mac book air on latest chrome (38.0.2125.104) the height is 8, in Safari (7.0.3 (9537.75.14)) it's 10, in Firefox (32.0.3) 4.
My coworker have 9 on almost the same machine (my mac has 1.7 Ghz, his 2.0Ghz).
Mac book pro device has also a different value.
It looks like a floating point inaccuracy, but why? It's not the browser and not the display. You can get some funny values when you enable browser zoom via CMD +
Changing the font-size to 1.0em of .t2 results into no differnces, even with browser zoom.
The problem is not limited to very small em values, it's also present for non natural number, like 1.1em
// edit: this is not just for rem the problem occurs for em as well.
Note that rem is calculated based on the root font size. Each browser and display calculates a different pixel value. Also, css pixels don't necessarily correspond to a screen pixel, or the browser's calculations with the resulting screen pixels. The value changes with browser zoom, because the root font size changes when you zoom in.
Edit:
The actual size of .t2 relative to .t1 appears to be correct for every browser I have except Chrome, on Linux, OSX, and Windows. When zoomed out all the way, .t2 appears larger than .t1. Values such as 0.2rem and 1rem display properly, however. Safari on OSX (7.0.6), Firefox on Linux, and IE on Windows all display properly when zooming in.
Related
I ran into a problem when trying to increase the font on the mobile version of the site. The font size in the CSS is indicated in px, but visually, by the number of words that fit in a line on the same page, when viewed in the browser chrome and firefox, the desktop version of windows and android differ, on android the font is actually smaller - i.e. more words will fit in a line.
What is the reason? And how to fix it?
I tried changing px to pt, same result.
The problem was with the font, I replaced it with another and managed to achieve almost complete identity.
I was testing a scrolling element and found some strange differences between mobile (iOS) and desktop browsers. If you load this test website in an iPhone and desktop and inspect the content of the scrolling container I noticed that on iOS the calculated content height of the <p> elements is greater than on desktop.
This seems to be a font rendering related thing as the css of the example site is very minimal. I checked all the relevant css props I could think of (like font-size, line-height, etc) but they all have the same value on both sides.
In the images below <p> elements have a total height of 40px (20px margin + 20px content) on iOS and 38px (20px margin + 18px content) on desktop. This makes the total scrollHeight of the container element to be 4000px on iOS and 3800px on desktop.
I couldn't find any bug related in webkit bug tracker and I don't have at the moment an android device to test or any kind of table, so I could only test on my iPhone vs desktop. This behaviour can be reproduced in any browser.
Things that I tried
Other fonts and still could find differences of more than one pixel
Embed a google font to test if it had to do with native fonts on mobile vs desktop
Instead of 100 paragraphs used only one paragraph but with 100 lines of text
Set -webkit-text-size-adjust prop to none
Used some css resets but the difference persisted
Does anybody have a hint on this?
Desktop Browser
Mobile Browser
I'm quite new to webdev, but I would try using a specific line height for the paragraphs
I created a plugin that changes the font-size dynamically using javascript. In short, it gets the current width of the screen and does some math to set the html font-size to the new percentage.
It works flawlessly in everything (including IE 10) EXCEPT for macOS. It also works in iOS.
So, from my understanding, when you change the font-size on the html element, it should scale the line-height proportionality. It does that as expected, but not in macOS. In macOS it keeps the original line-height.
The problem this is causing is that on smaller screens (macbooks) the font-size shrinks, but the line-height is still blown out.
I don't deal with macOS very often so I'm not too aware of any bugs/oddball situations like this.
I've tried using Chrome and Safari, both with the same results.
Any insight on this would be much appreciated!
EDIT: I took some screen shots to show the problem i'm having with macOS and compared to what it should look like
https://imgur.com/a/5yq7V
I have to use fixed height for certain layout (google maps with form in the sidebar) elements and I noticed that 600px height in Firefox is much much bigger than in other browsers (Chrome, IE 8). The Firefox 600 px is actually displayed as cca 690 px! Even the google map tiles are rescaled, so they display the same in both FF and Chrome. And even the Web developer toolbar / Misc / Ruler shows 600 px instead.
How is that possible? Which setting is doing that? I thought that pixel is quite clear unit and it is reliable to be a real pixel.
Can I reset it for Firefox to the normal height, so that it looks the same in all browsers? I have problems with this because in Firefox everything can fit into those "600" (= 690) pixels, but not in other browsers. I would like the size to be similar compared to form fields that can actually fit in.
Is it desirable to do it? Or not because it will also break the sizes of everything else (font size) which users are already used to, it can break the browser settings and user expectations related to other sites etc.
PS: Note that I already did Ctrl-0 (or menu view > zoom > reset) in FF and similarly in Chrome.
I ran into a similar issue where every element on Firefox (OSX) was smaller than any other browser (OSX or PC). I realized the problem came from the font-sizing I gave in my CSS.
I was able to solve the issue (on my own site at least) by changing:
html{
font: 1em/1.5 Helvetica, Arial, sans-serif;
}
to
html{
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
I was using ems to scale a lot of my content, and I guess if you don't specify how big an em is, Firefox will make it up on its own sizing rules.
My Google Chrome on WIndows 7 has just been updated to the version 32 and the scrollbars look different.
The new width seems to be 15px. Was the scrollbars a bit wider in previous versions?
Yes, the scrollbars are indeed different in Chrome 32.
The scroll bars in Chrome 32 are Chrome OS style: flat, and without arrows at either end. They are also slightly narrower. I took a screenshot of an old one and a new one. The old one appears to be 16px wide while the new one is 15px wide.