Asked  8 Months ago    Answers:  5   Viewed   178 times

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!

 Answers

1

Sorry, but there’s really nothing you can do about it.

  • Each browser has its own rendering engine, and they render colors differently.
  • Users rarely visit a website in more than one browser, and as a result will probably not notice.
  • As I said, there’s nothing you can do to change it. Just pick a color that looks fine in the different browsers and continue. I wish I could offer you a better answer but that’s really all there is to it!
Saturday, October 9, 2021
 
5

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.

Thursday, June 24, 2021
 
BradM
 
2

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.

Sunday, September 19, 2021
 
Mark116
 
4

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.

Monday, September 27, 2021
 
1

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>
Thursday, December 9, 2021
 
vkrams
 
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :