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.
Related
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
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.
Internet Explorer (at least IE 8) won't resize my text when the following class is used:
a {
font: normal 12px Verdana;
}
You can see what I mean in the browser under View -> Text Size - Largest
What is the best way to format text so that it is resizable? I read that em can be used, but is there another way without changing the sizes that I've already set?
The best way to make text resizable is to not set font size at all. You should probably consider using a font other than Verdana then, because you probably think it is ugly in typical default font sizes, and this is why you are creating the problem.
If you set font size in pixels, then the logical interpretation, applied by some old browsers, is that you mean what you say – your settings can still be overridden, but not by the usual font size settings available to users.
I am about to design a series of tabs with an 11px x 11px "X" for the close icon.
In IE9, if I zoom it to 95%, I saw a image distortion of the "X". I did a test of displaying multiples of the same icons and zoom it, it works perfectly in Chrome and Firefox but not in IE.
I think there is something to do with the custom zoom, because in Chrome and Firefox you can only zoom it by 10% each time.
Please correct me if I'm wrong about this.
Confirmed ^^
I don't think you can solve this. You can't control how Internet Explorer resizes images during zoomchange. Because this is a problem concerning one/two pixels it's only noticable when the image is very small. Internet explorer is obviously calculating the height and the width in different manners.
Why do you expect that an 11px x 11px image would look good displayed at 95% size? If you want it smaller, create a 10px x 10px version.
IE uses a completely different rendering engine to the other browsers.
Internally, when a zoom occurs, it will re-draw the browser area with scaling applied. Some browsers use anto-aliasing and other techniques to remove or mitigate artifacts.
Unfortunately, this isn't something you have any control over.
I have a web site that has had a fluid layout for years. That is the body's text size is defined and from there all other sizes are relative and are specified in terms of ems. This made the page fully scalable on IE 5.5 upwards, old FF versions etc. Nowadays it isn't really that important anymore since in modern browsers there is page zoom opposed to text zoom. Page zoom works on all browsers for me IE, FF, Opera and zooming in works on Webkit based browsers, too. But zooming out (to less than 100%) breaks the layout and I don't understand why that is.
here is an example page from the page as it stands to try this:
Why does the layout break in Safari (I used 5.0.5 to test) and Chrome when zooming out? In Chrome it works for like two steps of zooming out and then breaks. There is little use to zooming out so this is more of an academic question I guess. I'd like to understand what's happening.
Thanks.
It's might because of some default browser styles that are based on px instead of ems. For example, if you use the webkit inspector in Safari <ol class="navi_rechts"> has a user agent stylesheet that includes -webkit-padding-start: 40px. It might be worth using a CSS reset or checking for things like this on any messed up elements.
EDIT It may also be a rounding issue with some of your values. I'm not sure how many decimal places Safari will look at, but I'm guessing things like padding: 0.46154em 0em 0em 0.92308em; on h1.navi_parent_rechts might be too specific.