CODEWITHSUNDEEP
css
Montana
Montana

Reputation: 93

transform: translateY(-50%) div elements loses quality

I'm designing a generator. Today, refactoring code I encountered a problem that I have seen several times in my path, but somehow I never penetrated into its existence. Namely - div after adding the attribute in CSS transform: translateY (-50%) loses on the quality of its elements inside, someone knows why this is happening? Elements are blurry, especially fonts and banners.

I'm using this line to center the diva vertically

Low quality borders & text

If i delete this line, everything back to normal

#message {
    width: 500px;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    margin-left: -250px;
    position: fixed;
    background: #fff;
    z-index: 201;
    padding: 20px;
    box-sizing: border-box;
}

Upvotes: 1

Views: 268

Answers (1)

razemauze
razemauze

Reputation: 2676

I would believe that it is because og "half pixels".

You tell the div to transform -50%. If the div has a height of 101px, the 50% will be 50.5px, and you cant have a half pixel.

You can check if this is the problem, by setting a specific height, that can be split in two, without going into halves.

Upvotes: 4

Related Questions