0

So I'm having difficulty fixing some pixelation issues on Chrome.

here are some examples:

an image (transform: translate(-50%, -50%); position: fixed;)

some text(transform: translate(-50%, -50%) rotate(180deg) and (transform: translate(-50%, -50%);) are blurry

I've tried
-webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0); and other solutions, but nothing seems to be working.

Anyways, thanks for checking it out and thanks for your help!

tunis
  • 15
  • 6

1 Answers1

1

This is a common issue with Chrome, you could try hacks but personally I never got it to work, so if I were you I'd build it with another approach. Blurry text after using CSS transform: scale(); in Chrome for your information.

I suggest you fix the parent instead of the children and use flexbox.

.entry-content .navigation {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 30px;
    left: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

And you remove absolute/fixed positionning from the links. It will need fine tuning though. The only drawback is that the element will cover the whole page, so that might not work for you.

mttetc
  • 711
  • 5
  • 12
  • Thanks! I'll have to give it a shot. Such a bummer it's a common issue with not real solution! – tunis Aug 11 '20 at 15:10