Project X593 Project X593 - 2 years ago 99
HTML Question

Rotation and opacity causes text rendering issues in Firefox

I've run into an odd text rendering issue with Firefox. I have a div that is rotated, and another div inside it has it's opacity rapidly changed between 1 and 0.5. This causes any text inside the div to render differently each time the opacity changes - some numbers will shift up or down by a pixel, parts of the text will be thicker or narrower.

As an example, this:

<div class="outer">
<div class="glowyWrapper">
<div class="glowy transparent"></div>
<p class="someText">1 2 3 4 5 6 7 8 9</p>

With these styles:

.outer {
transform: rotate(1deg);
width: 300px;
height: 200px;

.glowyWrapper {
width: 100%;
height: 10%;

.glowy {
width: 100%;
height: 100%;

.transparent {
opacity: 0.5;

.someText {
font-size: 60px;
font-weight: 800;
text-align: center;
margin: 10px;

Adding a bit of javascript to repeatedly add and remove the "transparent" class will cause the rendering issue.

Here is a fiddle demonstrating the issue:

I have found a few workarounds, like decreasing the rate the opacity changes, or having it alternate between 0.95 but I'd rather not have to adjust the speed of it if possible, or have the flashing div be always transparent to some degree. Is there a better solution to this?

I found the issue in Firefox version 46.0

Answer Source

Since transform is already there and -moz-backface-visibility: hidden; useless you may use a filter to force FF render calculation, so you cure also the stair effect on edges.

  filter: blur(0.1px);/* note that even 0 as value does it */

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download