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>

CodePudding user response：

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>

CodePudding user response：

Because the properties on the text changes, right click and inspect element and you will be able to see this:

CodePudding user response：

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.

CodePudding user response：

It is because the second <p> is overlapping the first <p> which resulted in bolder font.

Just like how we draw lines on a white paper. At first the line will be thinner. If we keep draw lines repeatedly it will result in bolder line. Same concept is applied here.

To explain this better lets have a series of p here each with less opacity overlapping one another.

Single element opacity

p {opacity: 0.17;color:red;}

<p>Test</p>

Multi element opacity

p {
  position: absolute;
  color: red;
  opacity: 0.17;
}

<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>

As you can see the opacity: 0.17 is multiplied by 10 (number of elements) and resulted in a visible format.

CodePudding user response：

Let me explain you the whole process js function setInterval() run after every 1000ms.

const elem =  document.querySelector('p');

It will select the element

elem.style.display = elem.style.display === 'none' ? '' : 'none';

this line will change the style of the element. It will toggle the style if display:none then remove none otherwise add none. And you are not running for each selector so it is running for the last element. Remove position: absolute; then check

setInterval(() => {
  const elem =  document.querySelector('p');
  
  elem.style.display = elem.style.display === 'none' ? '' : 'none';
}, 1000)

p {
  
  color: red;
}

<p>Test</p>
<p>Test</p>

And when you use position: absolute;

setInterval(() => {
  const elem =  document.querySelector('p');
  
  elem.style.display = elem.style.display === 'none' ? '' : 'none';
}, 1000)

p {
  position: absolute;
  font-weight:300;
  color: red;
}

<p>Test</p>
<p>Test</p>