Font rendering differently on all OS X browsers - macos

I'm developing this website where I use CSS to style my menu buttons.
They all look good on Windows, but when I try them out on OS X, they render erroneously. What's even more odd is that they show good on a page, but [in my opinion] not so good on another:
Fonts render with a blur around:
Fonts render in "skinny" mode:
Also, I found out that if I hover over an element (ie. logo) that has CSS3 transitions applied on hovering, the blurry rendered fonts become rendered skinny, but when the CSS3 Animation ends, they resume the blurry rendering.
The CSS transitions in cause:
.logo {
float: left;
margin-left: 0px;
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
-webkit-transform: rotate(0deg);
}
.logo:hover {
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
-moz-transform: rotate(-3deg) scale(1); /* FF3.5+ */
-o-transform: rotate(-3deg) scale(1); /* Opera 10.5 */
-webkit-transform: rotate(-3deg) scale(1); /* Saf3.1+, Chrome */
transform: rotate(-3deg) scale(1);
zoom: 1;
}
You can observe this phenomenon live here: http://pote.ca.
Help? Please?
Thanks in advance! :)
UPDATE:
I am using verdana for the menu items, and another font for the // bun venit message.
Another example of fonts rendered that do not look good is the menu on Google's Analytics page:

That's not rendered "badly", it uses an overall different font rendering strategy than Windows. OS X tends to preserve the original shape of the character better, while Windows attempts to shove characters into a pixel grid. The results look different, not "worse". And yes, you need to take this into account as part of your design.
For reference, see A Closer Look At Font Rendering, Coding Horror: What's Wrong With Apple's Font Rendering? etc.

Related

CSS3 Transition on absolute positioned element disappears under Canvas, Embed

I have a menu bar with drop downs that use absolute positioned elements. On hover, the elements fade in using CSS3 transitions. Note, we're using a heavily modified version of Zurb's Foundation 4.
.has-dropdown {
.dropdown {
z-index: 90;
opacity: 0;
transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
&.hover .dropdown {
opacity: 1;
}
}
We have an instance of an OpenSeadragon image, using the html5 <canvas> option on one page, and a YouTube <embed> on another. The YouTube embed has the wmode="Opaque" and &wmode=transparent code on them to force them to respect z-index as outlined here. Both the embed and the canvas and their parent elements are set to z-index: 2; position: relative;
The issue we're running into is that the .dropdown element drops behind the <canvas> and the <embed> once the transition is complete. This seems to happen mostly on Chrome. As soon as we mouse over any of the menu items, the menu pops back in front.
How do we fix this?
Removing the transition fixed the issue. The menu popped right in front of both the canvas and the embed and stayed there.
This didn't solve the issue with having a css transition, though. In order to fix that, I applied a webkit-transform: translate3d(0px, 0px, 0px); to the .dropdown:
.has-dropdown {
.dropdown {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
&.hover .dropdown {
opacity: 1;
}
}
Now I have a transition that appears over the top of the embed and the canvas. Happy days!
Just add z-index to higher number like:
z-index: 1111;
If needed add:
pointer-events: none;

changing image colour by CSS3 (Filters)

I have a png image which works as a link and I would like to give it an effect on hover. For example its background colour changes to orange. Can I do it by CSS?
Or any other effect, such as an orange shadow around the shape inside the png image, and not the whole image (including transparent areas).
This is the code so far:
.latestTrack img {
float:right;
margin-right:50px !important;
}
.latestTrack img:hover {
box-shadow: 0 0 10px orange;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
You can set a shadow around a shape of a png alpha image with a drop shadow filter.
-webkit-filter: drop-shadow(10px 10px 10px gray);
See this link for + info
drop shadow filter comparison

Image substitution and transition with css3?

I wonder If anybody knows a clever and new way how to make a transition between two background images? I know there are multiple tutorials out there just most of them are outdated and old.
I wonder if there is a clever and modern CSS3 way of doing something like this.
I have a simple logo.png set as background to a div.logo (I want it to be set as a background image not via img src). And when I hover over it I want a smooth transition to "logo-hover.png" which is the same file just in a different color.
Any ideas how to do this nowadays?
My approach would be this:
- I create a outer container around div.logo wich position relative. I position two divs inside of it with position absolute on top of each other. The div.hover is set to display:none and if I hover it I use css3 transition to animate it's opacity.
Is this the only way of doing this?
I'd actually love to use a pure css way where I don't have to add an additional div with the hover state to the dom itself.
Any ideas on that matter?
Thank you in advance.
use this
#home .stripes, #home .stripes:hover a {
text-indent: -9999px;
width: 116px;
height: 128px;
margin: 50px 0px 0px 56px;
float:left;
padding: 0;
background:url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}
#home .stripes a {
background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
#home .stripes a:hover, #home .stripes a:focus {
background:url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
opacity: 0;
}
and
I actually just came up with a solution for this myself.
I wanted a way to have an image appear to work as if it was a sprite, but keep it super simple.
HTML:
<div class="facebookicon">
<img src="http://example.com/some.png">
</div>
CSS:
.facebookicon img {
background: #fff;
transition: background 400ms ease-out;
}
.facebookicon img:hover {
background: #3CC;
transition: background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */
You can see it here:
http://jsfiddle.net/mattmagi/MpxBd/
I think this is what you want:
DEMO.
Basically it's using transitions like you said:
CSS markup:
.imagesTest {
position:relative;
height:200px;
width:300px;
}
.imagesTest img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.imagesTest img.top:hover {
opacity:0;
}​
HTML markup:
<div class="imagesTest">
<img class="bottom" src="some/image" />
<img class="transition" src="some/image" />
</div>​
For more information, check more examples here

Preloading images for CSS animations?

I have a css animation on an image and I want it to play when the page loads. What is currently happening is that the image get loaded without the animation playing the first couple of times you load the page. After that is works fine. I'm guessing the image gets cached.
Is there a way to pre load the image so that the animation works straight away?
Rather than preload the image, I'd recommend not applying the animation until the image has loaded. Using jQuery, you can apply a class to the image only once everything has loaded:
$(window).bind("load", function(){
$("#future-head-hand").addClass("loaded");
});
Then apply the animation to that class instead:
.loaded {
position: absolute;
left: 60%;
bottom: -40%;
margin-left: -190px;
-webkit-animation-name: FadeIn;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 1s;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-webkit-animation-name: movinghand;
-webkit-animation-duration: 0.5;
}
I think you can accomplish the same thing by moving all your js to the bottom of your html so that it loads after all of the css and images.
If you're using Adobe Edge, you can go into View > Preloader Stage and add a spinner, or something like that, to show that the animation's loading, before it's actually ready.

Why do CSS3 animations behave strangely when used in conjunction with CSS3 transitions?

See this fiddle for an example of what I mean or view this code.
test
a{
background-color:#ccc;
transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
}
a:hover{
background-color:#888;
}
a{
-moz-animation-duration: 3s;
-moz-animation-name: move;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
#-moz-keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: 50px;
}
}
The animation occasionally jumps about or changes speed, particularly when you hover over it... I have tried running the animation on its own (without the transition defined) and it runs smoothly and as expected. I have run the transition on its own and it works as expected. The combination seems to cause the problem.
Could be a Firefox implementation bug? I'm running Firefox 6.0.1, Ubuntu 11.04.
You need to replace 'all' by 'background'. Then it works fine. I think when you hover it will transition all styles, so also the current-margin-left to the new margin-left, which is the same, so the margin doesn't change for the duration of the transition. Afterward the animation takes precedence again and you see the jump.

Resources