Prevent blurry effect in pure css parallax when using transform scale

Question

I have a problem with a parallax website using pure css.
The problem is that it uses css transform scale to create the parallax effect, this causes a blurry effect on the images and the text inside the container div scaled.
I've tried filter:blur(0), and others fixed solution that I found on the web but nothing can fix it in Firefox.
In addition there is another problem, the image's slider left some pixels on the left side of the browser's page.
Can someone help me?

http://www.jeanclaudechiementin.com/etoile/index.html

You can see the problem on the logo and the menu on the top of the page

This is a underestimated hidden gotcha that many CSS3 parallax tutorials don't even bother to mention. In the end, JS was my solution. — Ricky Boyce, Apr 03 '17 at 05:25

score 0 · Answer 1 · answered Dec 31 '18 at 04:24

You can use a relative sizing property that gets inherited by child elements, instead of using scale(...) in the parallax's transform. For example, scale up font-size and omit scale(...):

html {
  overflow-y: hidden;
}

body {
  height: 100vh;
  overflow-y: auto;
  perspective: 1px;
}

.large {
  font-size: 3em;
  font-weight: bold;
}

.parallax.item {
  font-size: 2em; /* scale with a relative sizing that gets inherited by child elements instead of using `scale()` in the `transform` property below */
  position: absolute;
  transform: translateZ(-1px); /* notice no scale() */
}

<html>
  <body>
    <div class="parallax item">
      <div class="large">Hello!</div>
    </div>

    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
    <div class="large">Hello!!</div>
  </body>
</html>

Now you've got the opposite problem, at least on Chrome: the text needs some antialiasing :P

Prevent blurry effect in pure css parallax when using transform scale

1 Answers1