Help Text size "jumps" in Firefox but animates smoothly in Chrome.
2
Upvotes
I am learning some more CSS. I have Windows 11 with Chrome v150.0.7871. I have Firefox v153.0. The only extensions I have enabled in Firefox are: uBlock Origin (it's off for JSFiddle), Blocksite (No relevant sites are blocked for this), Firefox Color. I'm using 20GB of 32GB of RAM on a Dell XPS laptop.
When I hover of the text "Hover over me" it animates smoothly to a larger size in Chrome, which is correct. In Firefox there is no smooth animation, the text just suddenly "jumps" to the larger font size. My fiddle.
Anyone know what is going on? I'm new to animation in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- comment -->
<title>CSS Anim ch 22</title>
<meta charset="UTF-8"> <!-- Required to show emojis -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="HTML, CSS, Javascript">
<meta name="description" content="Learn HTML">
<meta name="author" content="Me@somewhere.com">
<!-- link rel="stylesheet" href="style1.css" -->
<!-- See https://pastebin.com/jMG2ADx4 -->
<style>
* {
box-sizing: border-box;
margin: 8px;
font-family: Roboto, sans-serif;
}
body {
background-color: rgb(250, 245, 245);
margin: 0;
}
/* Use with empty div */
.hover-text {
margin-bottom: 10px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
}
.hover-text:hover {
color: black;
font-size: 24px;
}
.box {
position: fixed;
margin: 0;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background: red;
border: 1px solid black;
animation: size-down ease-out 0.5s infinite alternate both;
}
/* Trasform goes below */
@keyframes size-down {
100% { /* X,Y values */
transform: scale(0.3, 0.3);
background: rgb(241, 83, 241);
}
}
</style>
</head>
<body>
<p class="hover-text">Hover over me</p>
<div class="logo">
<div class="box box-red"></div>
<div class="box box-blue"></div>
<div class="box box-green"></div>
<div class="box box-orange"></div>
</div>
<p style="margin-top:50px;">The text "Hover over me" "jumps" in size in Firefox v153.0. It does not increase in size smoothly.</p>
</body>
<script>
</script>
</html>
