CODEWITHSUNDEEP
firefoxcssrenderingtransform
user828591
user828591

Reputation: 1262

Odd Firefox rendering (css transform)

this new CSS3 stuff is so fancy, but the rendering seems to be really inconsistent among browsers (and I'm not even talking about the shadow shape itself)

Here I made an example that looks fabulous in Chrome, but with a jagged border in Firefox: http://jsfiddle.net/eBJxV/4/

Note that I've added a box-shadow and it looks like the background color shines through. For Chrome, there is this workaround with translate3D, is there also something I can do for Firefox?

here's the code you can also see in JSFiddle

h1 {
    background-color: #E8501F;
    border-radius: 13px 0 0 13px;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
    display: block;
    font-size: 18px;
    height: 30px;
    letter-spacing: 0.03em;
    padding: 0 20px;
    text-transform: uppercase;

    transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0);
    transform: rotate(-4deg) translate3d( 0, 0, 0);


    -webkit-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
    -webkit-transform: rotate(-4deg) translate3d( 0, 0, 0);

    margin:10px 0;
    width:100px;
    font-weight:bold;
    font-family:Verdana;
    color:#ffffff;
}

body{
background-color:#FFF;
}

Upvotes: 2

Views: 908

Answers (3)

user5542121
user5542121

Reputation: 1052

Solved it, by adding a border with 1px with, and the same background color. Then apply box-sizing differently, sot that the border is part of the size. Then due to padding, had to change the width.

http://jsfiddle.net/eBJxV/19/

h1 {
    background-color: #E8501F;
    border-radius: 13px 0 0 13px;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
    display: block;
    font-size: 18px;
    height: 30px;
    letter-spacing: 0.03em;
    padding: 0 20px;
    text-transform: uppercase;
    border-style: solid;
    border-color: #E8501F;
    border-width:1px;
    transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0);
    transform: rotate(-4deg) translate3d( 0, 0, 0);
    
    box-sizing: border-box;
    outline: 1px solid transparent;
    
    -webkit-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
    -webkit-transform: rotate(-4deg) translate3d( 0, 0, 0);

    margin:10px 0;
    width:140px;
    font-weight:bold;
    font-family:Verdana;
    color:#ffffff;
}

body{
    background-color:#FFF;
}
   <h1>JSFiddle</h1>
   <h1>Shiddle</h1>

Upvotes: 0

Zoltan Hawryluk
Zoltan Hawryluk

Reputation: 126

You can fix it with a CSS filter:

filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');

Here is the jsfiddle:

http://jsfiddle.net/eBJxV/14/

Note that this info (and more) is convered on a blog post I wrote a while ago on the subject:

http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

Hope this helps.

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

used to this for old Firefox -moz

As like this

h1 {

    -moz-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
    -moz-transform: rotate(-4deg) translate3d( 0, 0, 0);

}

Upvotes: 0

Related Questions