Why Do Browsers Render Rgba Differently on Osx

Why do browsers render rgba differently on OSX?

First off

Well, actually Safari and Firefox are both correct:
0xFF = 255, 255 / 2 = 127.5. So 128 may be correct (0x80), but also 127 (0x7F) - depending on the rounding convention of the browser.

Explantion of the issue

These are rounding issues. I don't quite get why there are rounding issues, since 0.5 is representable in binary numbers without precision loss, but there are, in fact rounding issues:

Opera:

Chrome:

RGBA not working on browsers other then Chrome

It seems a Firefox limit.... anyway, even if not so nice... a workaround that runs is simply wrap each letter in a span tag. Somethin like this (here only for first letter):

<a href="http://colourity.com/" id="h1logo"><span>C</span>olourity</a>

---

UPDATE May 13, 2015

I found a jquery plugin that has a similar behaviour. Probably CSS solution remain the best, but this is another possible solution (at least for someone)

Chrome renders colours differently from Safari and Firefox

I recently posted a similar question: https://stackoverflow.com/questions/6338077/google-chrome-for-mac-css-colors-and-display-profiles

As Andrew Marshall answered there, this is a known issue: http://code.google.com/p/chromium/issues/detail?id=44872

Why am I getting different colors in different browsers using the same hexadecimal value?

I can reproduce it in Chrome. It looks like it is because the selection is not completely opaque. If you set a background picture, you can see it shine through. This also means that the blue background color shines through, affecting the overall color of the selection.

I cannot (yet) find what exactly causes this and how to change it. Opacity doesn't work. The color is normal rgb... Anyway, proof of the cause can be seen here.

::selection {  background: #f997f1;}
::-webkit-selection {  background: #f997f1;}
::-moz-selection {  background: #f997f1;}
body {  background: lightblue;  background-image: url(https://www.google.nl/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)}
p {  font-family: sans-serif;  font-size: 2em;  color: #f997f1;}

<p>Some text to select</p>

Line height being represented differently on browsers

Did you try to use CSS reset. This makes sure that the size and spacing is always the same independent the browser.
See more: About CSS Reset

Put it before all your CSS code:

* {
   margin:0;
   padding:0;
   border: 0;
   list-style:none;
   vertical-align:baseline;
   line-height: 1;
}

CSS appears different on Windows than Mac

The problem is the different default styles that browsers have. Neither way of displaying your page is wrong, they are just different.

You have compensated for the default styles of one browser, which makes it look quite different in all other browsers. As long as you compensate for the default styles instead of overriding them, you will have that problem.

For example, for the .slogan style you should set the top and bottom margin to zero, instead of using relative positioning to compensate for the default margin. You can use line-height to center the text vertically in the element, instead of moving it up or down to place it in the center.

Example:

.slogan{
  width: 960px;
  line-height: 30px;
  margin: 0 auto;
  color: white;
  font-size: 1.3em;
  font-family: 'Aldrich', cursive;
}

---

Related Topics