Tiffany B. Brown

Striped border bug on transformed elements in ≤ Opera 12.02


Opera’s border rendering on elements with a rotate transform applied.

Opera 12.02 (and older versions with support for transforms) has a rendering bug in which borders of elements that have a rotation transformation applied will appear striped when placed on a colored background. The image above shows this bug in action. The code below shows the markup involved (view an HTML example).

<div id="stripey">

    <img src="essaouira_2.jpg">

</div>

And here’s the CSS (using just the -o-prefixed property for simplicity’s sake).

#stripey{

    background:#909;

}



img{

    width: 300px;

    height: 200px;

    -o-transform: rotate(15deg);

    border: 10px solid #fff;

}

Luckily, this is an incredibly easy problem to fix. We just need to set a background color on our transformed object that is the same as our border. Our updated CSS looks like this.

#stripey{

    background:#909;

}



img{

    width: 300px;

    height: 200px;

    -o-transform: rotate(15deg);

    border: 10px solid #fff;

    background-color: #fff; /* fixes the striping. */

}

The result (also available in the HTML version):

This bug is fixed in the Opera 12.10 release candidate. Opera 12.10 should be released soon.

2 Responses to “Striped border bug on transformed elements in ≤ Opera 12.02”

  1. Estelle says:

    Ask a question and you get a blog post. Tiffany, you rock!

  2. tiffanybbrown says:

    Thanks! I figured it would be a good idea, since someone else will probably run into this problem.