Why my text is laggy like that? When I hover

13 Replies

ZeyFoxOP•13mo ago

red text

without code/example/codepen, no idea

ZeyFoxOP•13mo ago

ok wait

.card1, .card2, .card3, .card4{
    position: absolute;  
    transform: translate(-50%);
    background-color: #303030;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 300ms ease;
    width: 400px;
    height: 200px;
}
.card1 { 
    top: 100px; left: 32%;
}

.card2 {
    top: 200px; left: 68%;
}

.card3 {
    top: 360px; left: 32%;
}

.card4 {
    top: 450px; left: 68%;
}
.card1:hover,
.card2:hover,
.card3:hover,
.card4:hover {
    transform: translate(-50%) scale(1.1);
}
 .redtext {
    color: #ff2511;
}

.card1, .card2, .card3, .card4{
    position: absolute;  
    transform: translate(-50%);
    background-color: #303030;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 300ms ease;
    width: 400px;
    height: 200px;
}
.card1 { 
    top: 100px; left: 32%;
}

.card2 {
    top: 200px; left: 68%;
}

.card3 {
    top: 360px; left: 32%;
}

.card4 {
    top: 450px; left: 68%;
}
.card1:hover,
.card2:hover,
.card3:hover,
.card4:hover {
    transform: translate(-50%) scale(1.1);
}
 .redtext {
    color: #ff2511;
}

the part of the code

            <div class="card2">
                <h1>Quels jeux ?</h1>
                <p>Vous pouvez <span class="redtext">télécharger</span> les jeux : <span class="yellowtext">PS3</span>, <span class="yellowtext">PS2</span>, <span class="yellowtext">PS1</span>, <span class="yellowtext">PSP</span>, <span class="yellowtext">PSP MiniS</span>, <span class="yellowtext">SNES</span>, <span class="yellowtext">Rétro</span>, <span class="yellowtext">Ports</span> et des <span class="greentext">émulateurs</span>.</p>
            </div>

            <div class="card2">
                <h1>Quels jeux ?</h1>
                <p>Vous pouvez <span class="redtext">télécharger</span> les jeux : <span class="yellowtext">PS3</span>, <span class="yellowtext">PS2</span>, <span class="yellowtext">PS1</span>, <span class="yellowtext">PSP</span>, <span class="yellowtext">PSP MiniS</span>, <span class="yellowtext">SNES</span>, <span class="yellowtext">Rétro</span>, <span class="yellowtext">Ports</span> et des <span class="greentext">émulateurs</span>.</p>
            </div>

MarkBoots•13mo ago

try and see if it helps to adjust the transition transition: transform 300ms ease; specify the exact property that will transition (in this case 'transform' )

ZeyFoxOP•13mo ago

i will try thx same

MarkBoots•13mo ago

otherwise I think it is the browser having some rendering options.

ZeyFoxOP•13mo ago

i test on chrome and opera

MarkBoots•13mo ago

those are both chromium. do you have firefox?

ZeyFoxOP•13mo ago

no i install same @MarkBoots

MarkBoots•13mo ago

strange, I don't have any issue running this.

ZeyFoxOP•13mo ago

yes me too i don't understand why the text is like that

MarkBoots•13mo ago

ah, there is a small flicker.... seems the engines have it difficult with rerending it. the scale does that sometimes. don't really know a solution for that. probably the rounding of the scale not having exact pixelvalues

ZeyFoxOP•13mo ago

ah when I zoom on the page and I do the hover there is no longer this problem same for the color blue

Gaming

Programming

Why my text is laggy like that? When I hover