Font becomes pixelated after placing div in middle of screen

Question

The font within the div provided is pixelated (h3,p). I don't think its my computer or browser settings because the font outside of the div aren't pixelated. The pixelated appearance happens after I centre the div within the middle of the screen in the .popupBoxWrapper. Here is the code related to the div, any idea what could be causing the problem?

HTML:

<div id="popupBoxOnePosition">
  <div class="popupBoxWrapper">
    <div class="popupBoxContent">
      <a href="javascript:void(0)" onclick="toggle_visibility('popupBoxOnePosition');">
        <button class="close" onclick="document.getElementById('popup').style.display='none'">X</button>
      </a>
      <h3>Title</h3>
      <p>Example</p>
      <p>lineone</p>
      <p style="font-size: 15px;">Follow us on Instagram @sharegoodmessages</p>
      <p style="font-size: 15px;">Follow us on Twitter @SgmEnglish</p>
      <br>
      <p style="font-size: 15px;">Developed by example</p>
    </div>
  </div>
</div>
<div id="wrapper">

  <a class="icon" href="javascript:void(0)" onclick="toggle_visibility('popupBoxOnePosition');"><img src="info_button.png"></img>
  </a>

</div>

CSS:

#popupBoxOnePosition{
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    display: none;
    position:fixed;
    z-index: 1;
    overflow: hidden;
}

.popupBoxWrapper{
    display: block;
    width: 500px;
    text-align: left;
    position:fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.popupBoxContent{
    background-color: GhostWhite;
    padding: 15px;
    padding-left: 35px;
    padding-right: 35px;
    display: block;
}

.close{
    border:0px;
    float: right;
    color: black;
    cursor: pointer;
    background-color: GhostWhite;
    display: block;
    position: absolute;
    top: 18px;
    right: 25px;
    text-align: right;
    margin: 0;
    padding: 0;
    text-decoration: none;
    white-space:pre-wrap;
}

score 0 · Answer 1 · edited May 23 '17 at 11:54

The problem may only occure in your browser or OS, depending on the pixel-rendring. The chosen font may also have an impact.

Quick and easy you could try to add this to the CSS:

.popupBoxContent {
    -webkit-font-smoothing: antialiased;
}

Or this to the text using the font (Stolen from this answer):

// try around, find the setting that fits your font-size
webkit-text-stroke: 0.6px; 

// alternative RGBa syntax, allows finer settings with alpha-transparency
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);

Anyway, there are plenty of answers out there which answer more in depth why it occures, and there might not be any easy solution. You can also read further here.

Font becomes pixelated after placing div in middle of screen

1 Answers1