0
177
ViewsWhy text pulse?
I wonder why this text, although it is the same, is pulsating. Any ideas? Looks like a font rendering issue.
setInterval(() => {
const elem = document.querySelector('p');
elem.style.display = elem.style.display === 'none' ? '' : 'none';
}, 1000)p {
position: absolute;
color: red;
}<p>Test</p>
<p>Test</p>3 answers
Answer question0
The reason for this is that text normally is rendered anti-aliased, which means that you have pixels with different transparencies (and possibly also color) at the border of the font to get a smooth look:
The area around the font is therefore up to one pixel larger than it is perceived when you look at it. If you overlay the same text multiple times then it appears to be thicker because the pixels with transparencies overlay and thus reduce the amount of the background to be seen:
When no anti-aliasing (font smoothing) is active you don't see a difference between the reference text and the case where multiple elements overlay (that example might not work for every browser or os):
p {
position: absolute;
}
* {
font-smooth: never;
-webkit-font-smoothing: none;
}<p>overlayed text</p>
<p>overlayed text</p>
<p>overlayed text</p>
<p>overlayed text</p>
<div>reference text</div>With anti-aliasing (font smoothing) is active you can see that the overlayed text looks bolder then the reference text.
p {
position: absolute;
}<p>overlayed text</p>
<p>overlayed text</p>
<p>overlayed text</p>
<p>overlayed text</p>
<div>reference text</div>0
It most probably have to do with anti-aliasing of the font. It causes edges to be semi-transparent, which when overlapped will cause them to be more opaque and therefore more visible.
0
Because the properties on the text changes, right click and inspect element and you will be able to see this:
