A bug with position: fixed and backface-visibility in Firefox

During the layout of the next project I came across a strange bug in Firefox of fresh versions that support the backface-visibility property. I did not meet the description of this problem earlier, so I decided to share it. It will be useful to anyone who read this post about anti-aliasing under Windows and began to use these tips.

The essence of the problem

So, if you use recommendations from the above post to improve the smoothing of web fonts, then your CSS has the following lines:

body { -webkit-font-smoothing: subpixel-antialiased !important; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; } 

Now imagine that in addition to a good font rendering, you (or your designer) suddenly wanted to add a floating panel (in our example, social network icons) to the project, which is quite logical using position: fixed . ( http://jsfiddle.net/RYCnH/184/ )
For some reason, this very panel in Firefox “refuses to float” after adding font smoothing properties and positions itself as if its position is not fixed, but absolute: http://jsfiddle.net/RYCnH/185/ .

Decision

It's all about the property -moz-backface-visibility: hidden . Changing it to visible in the container of our floating panel, we get the desired effect: http://jsfiddle.net/RYCnH/186/ .