0

CodePen - Only a problem on Safari

HTML

<div id="background"></div>

<div class="text">
  This is some sample text that doesn't look great.
</div>

<div class="text text-background">
  This is some sample text that looks stellar!
</div>

CSS

#background {
  background-image: url("https://s3-us-west-2.amazonaws.com/ks.test/beaver_creek.jpg");
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.text {
  color: white;
  font-family: "Lato";
  font-size: 20px;
  font-weight: 300;
  position: relative;
}

.text-background {
  background-color: #464646;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
}

I've found lots of related posts (here for example), but none that directly address the issue when a background image appears to be the culprit.

Only in Safari, I'm running into an issue where font renders poorly against a background image, but when I remove the background image and set it to gray the font looks fine.

Community
  • 1
  • 1
bschnelle
  • 202
  • 1
  • 2
  • 8
  • 2
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Mar 01 '16 at 23:02
  • using css, put the image or both with the text on the hardware layer and see if any different -- (-webkit-transform: translateZ(0); transform: translateZ(0);) that usually gets rid of the blur -- http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css – Tasos Mar 01 '16 at 23:13
  • I gave it a shot, but it didn't seem to have any effect. Here's a pen demonstrating the issue. http://codepen.io/anon/pen/PNwrvZ?editors=1100 – bschnelle Mar 02 '16 at 01:55

0 Answers0