CSS rendering bug on rotated :after pseudo elements - css

Question

I sure hope I did not miss the according discussion on this:
I define an ":after"-pseudo element to create a triangle on top of a <p> (<div> looks the same) using the following CSS-code:
div {
padding-top: 20px;
}
p {
position: relative;
width: 200px;
height: 100px;
display: block;
background-color: #ccc;
margin: 75px auto 0 auto;
}
p:after {
content: "";
position: absolute;
top: -35px;
width: 50px;
height: 50px;
left: 15%;
background: #ccc;
border: 10px solid #fff;
border-color: #fff #fff #ccc #ccc;
transform: rotate(-45deg);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.dark {
background-color: #333;
}
.dark p:after {
border: 10px solid #333;
border-color: #333 #333 #ccc #ccc;
}
<div>
<p></p>
</div>
<div class="dark">
<p></p>
</div>
I noticed a thin outer visible edge (seemingly in the given background-color) in Safari, chromium forked Browsers (Chromium, Vivaldi, Brave, Chrome, Edge) and even worse in Firefox (all on Mac OS X 10.14). I took screenshots in different colors (and magnified by 2) to illustrate the issue. All of this on a non-retina 1080p display.
Can anyone explain this to me?
(The clip-path prevents the edge (which surrounds the whole pseudo-element) from reaching down inside the parenting div.)

Answer 1

The issue seems to be related to angles, Specifically any angle that is not a straight angle.
Related issue
In gradients it happens when there's hard stops from one color to the next, the fix is to avoid hard stops and give the colors room to transition so we don't see the pixels.
div {
height: 300px;
width: 300px;
display: inline-block;
}
[problem] {
background: linear-gradient(30deg, black 50%, orange 50%) no-repeat;
}
[solution] {
background: linear-gradient(30deg, black 49%, orange 50%) no-repeat;
}
<div problem></div>
<div solution></div>
Your issue is similar when you rotate the element to an angle that is not straight the edges are jagged We can't use the same idea from gradients Unfortunately.
*,
*:after,
*:before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
background-color: #333;
height: 300px;
width: 300px;
position: relative;
}
div:after {
content: "";
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background: #ccc;
transform: rotate(1deg);/* any angle that is not right*/
border: 30px solid #333;
}
<div></div>
Though we can clip it, to prevent the hard stop between the :after's background and the background of the parent because they're different.
*,
*:after,
*:before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
background-color: #333;
height: 300px;
width: 300px;
position: relative;
}
div:after {
content: "";
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background: #ccc;
background-clip: content-box;
transform: rotate(-45deg);
clip-path: polygon(0 0, 100% 0, 100% 100%);
border: 30px solid #333;
}
<div></div>
Original code:
html, body {
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 20px;
}
p {
position: relative;
width: 200px;
height: 200px;
display: block;
background-color: #ccc;
margin: 75px auto;
padding: 0;
}
p:after {
content: "";
position: absolute;
top: -35px;
width: 50px;
height: 50px;
left: 15%;
background: #ccc;
background-clip: content-box; /* NEW */
border: 10px solid #fff;
border-color: #fff #fff #ccc #ccc;
transform: rotate(-45deg);
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.dark {
background-color: #333;
}
.dark p:after {
border: 10px solid #333;
/* border-color: #333 #333 #ccc #ccc; */
}
<div>
<p></p>
</div>
<div class="dark">
<p></p>
</div>
Tested in latest Chrome and FF on Win 8
The issue might pop back up with the background itself, You can see it in the demo below
A bit of jaggedness on the sides of the background, it's subtle but you can see it if you're looking for it
*,
*:after,
*:before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
background-color: #333;
height: 300px;
width: 300px;
position: relative;
}
div:after {
content: "";
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background: #ccc;
background-clip: content-box;
transform: rotate(1deg);
clip-path: polygon(0 0, 100% 0, 100% 100%);
border: 30px solid #333;
}
<div></div>
We can fix it by having 4 gradients on the edges which transition outward from the color of the current background to the color of whatever is behind which would be tricky to manage dynamically.