February 4, 2015 at 17:55Diagonal Borders and Firefox Problem
- Transfer
Recently I encountered such a problem - I made up a non-standard picture frame using pseudo-elements and borders and faced with the fact that Firefox could not cope with anti-aliasing of lines of these very borders.
Googled the solutions, eventually came across this small article, which miraculously solved the problem. I hope someone else comes in handy, although the article is tiny.
Demo
Mozilla Firefox is one of the browsers that render diagonal borderboards using antialiasing. And everything would be fine if he applied it correctly, as other browsers do (including IE 9 and IE10). But, unfortunately, it doesn’t work out very well.
Quite a long time ago, I read and tweeted a good article by Chris Morgan in which he explained how and why “transparent” in CSS may not be transparent , especially on diagonal borderboards.
Let's say you have such a triangle in CSS:
Such code is equivalent to the following, since "transparent" is the same as rgba (0, 0, 0, 0):
But what do we see?
So, in order for the code to work correctly in Firefox, you should avoid using the "transparent" value, instead of using the corresponding RGB color with a zero alpha channel.
In one small project, I used an abstract triangular divider made using a diagonal border. Newans was that this separator was quite large, separating one part of the site from another.
Here is an example of such a separator:
If you use Firefox, you may notice a blurry effect on the border of colors, which is formed due to antialiasing. This is striking and the previous solution does not help.
In this situation, a pretty dirty solution helps, which I came across: -moz-transform: scale (.9999). Surprisingly, small scaling, invisible to the eye, solves our problem. By the way, technically there is no need to write a prefix for this transformation, since Firefox supports the non-prefix version starting from version 16 .
But, since this hack is only needed for Firefox, the use of the prefix is just in place.
Renders poorly on the following versions of Firefox:
As far as I could see, this problem was fixed in Mozilla Firefox Nightly 20.0a1.
PS From the translator: I have no first problem on Ubuntu Firefox 35.0.1, and in the second case, terrible teeth, as, in fact, in my case. The second fix decides.
Googled the solutions, eventually came across this small article, which miraculously solved the problem. I hope someone else comes in handy, although the article is tiny.
Demo
Mozilla Firefox is one of the browsers that render diagonal borderboards using antialiasing. And everything would be fine if he applied it correctly, as other browsers do (including IE 9 and IE10). But, unfortunately, it doesn’t work out very well.
First problem
Quite a long time ago, I read and tweeted a good article by Chris Morgan in which he explained how and why “transparent” in CSS may not be transparent , especially on diagonal borderboards.
Let's say you have such a triangle in CSS:
div {
border-top: 150px solid transparent;
border-left: 150px solid red;
}
Such code is equivalent to the following, since "transparent" is the same as rgba (0, 0, 0, 0):
/* red = rgba(255,0,0,0) */
div {
border-top: 150px solid rgba(255,0,0,0);
border-left: 150px solid red;
}
But what do we see?
Decision
So, in order for the code to work correctly in Firefox, you should avoid using the "transparent" value, instead of using the corresponding RGB color with a zero alpha channel.
Second problem
In one small project, I used an abstract triangular divider made using a diagonal border. Newans was that this separator was quite large, separating one part of the site from another.
Here is an example of such a separator:
div {
border-top: 70px solid rgba(0, 255, 0, 0);
border-left: 600px solid green;
}
If you use Firefox, you may notice a blurry effect on the border of colors, which is formed due to antialiasing. This is striking and the previous solution does not help.
My decision
In this situation, a pretty dirty solution helps, which I came across: -moz-transform: scale (.9999). Surprisingly, small scaling, invisible to the eye, solves our problem. By the way, technically there is no need to write a prefix for this transformation, since Firefox supports the non-prefix version starting from version 16 .
But, since this hack is only needed for Firefox, the use of the prefix is just in place.
div {
border-top: 70px solid rgba(0, 255, 0, 0);
border-left: 600px solid green;
-moz-transform: scale(.9999);
}
Testing
Renders poorly on the following versions of Firefox:
- Mozilla Firefox 17.0.1
- Mozilla Firefox 18.0 - beta channel
- Aurora 19.0a2 (2012-12-06)
As far as I could see, this problem was fixed in Mozilla Firefox Nightly 20.0a1.
PS From the translator: I have no first problem on Ubuntu Firefox 35.0.1, and in the second case, terrible teeth, as, in fact, in my case. The second fix decides.