I am trying to pick colours for my web app but realizing a huge difference in the way safari renders the stylesheet when compared with firefox or chrome. The red colour in the screenshot is supposed to be #ff3366, however it seems safari chooses to render #ff0036.
I am not sure why I can't find any information on this problem, am I crazy?
I am running 10.9.1 Mavericks
thanks!
The way I solved this problem, is introducing a pure CSS fall-back, that older browsers that don't support CSS calc would only read.
figure.left {
width: 48%;
width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);
}
The left and right panels, get a width of 48% if the browser cannot read the calc values.
figure.logo {
min-width: 40px;
width: 4%;
width: -webkit-calc(40px);
width: -moz-calc(40px);
width: calc(40px);
}
And the logo, which sits in-between the two panels, gets a width of 4%. And also a minimum width of 40px. And if the calc values can be read by the browser, they are 40px.
I'm not sure why, but Safari is disabling subpixel antialising at small font sizes on that page. You can fix it by applying -webkit-font-smoothing: subpixel-antialiased. See here: http://jsfiddle.net/qLHuc/3/
However, I think you should consider using a heavier font. Have you tested this on Windows? It will likely look very, very light. OSX renders text very heavily when subpixel antialiasing is enabled, and especially heavily when text is against a dark or colored background. What you see in your Safari screenshot is similar to what people who aren't on OSX will see.
Eureka. I've been struggeling with this for days. Finally found that 100vh instead off 100% would make it work with most browsers.
height: calc(100vh - 100px);
instead of
height: calc(100% - 100px);
Finally, now I can get on with my project.
According to the CSS 2.1 specifications:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
I'm assuming that Firefox implements it one way, and WebKit implements it a different way and both are correct since it is undefined. The moral of the story here is not to specify a position on table elements.
I was able to get it to work by wrapping the contents of each table cell with a div and positioning the div. I also moved the overlay inside of the table row that I was targeting (not sure if that was necessary).
<table>
<tr>
<td>
<div style="position:relative; z-index:1000;">
Displays on top in both Safari and Firefox
</div>
</td>
</tr>
<tr>
<td>
<div style="position:relative; z-index:1000;">
Displays on top in both Safari and Firefox
</div>
<span class="overlay"></span>
</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
<tr>
<td>Displays below overlay</td>
</tr>
</table>
Sorry, but there’s really nothing you can do about it.