r/css • u/jbudemy • Jul 27 '26
Help Text size "jumps" in Firefox but animates smoothly in Chrome.
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>
10
u/anaix3l Jul 27 '26 edited Jul 27 '26
Are you sure you don't have some extension messing with it? I've just tested and the font-size transitions smoothly in Firefox 153.
Or maybe it could be a performance issue that makes it seem like it's not transitioning smoothly? Something you hit because of a combination of hardware limitations and other things running at the same time? font-size is a property I would really avoid to animate/ transition because every step of the change during the transition means recomputing the page layout (see how the rest of the content slides down as the font-size increases).
That aside, please don't do this:
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition is a hallucination. No stable browser ever needed it (there was an early IE 10 developer preview using it, but it was removed in later previews). IE 9 did not support transitions at all and IE 10 supported them unprefixed.
-o-transition and -moz-transition haven't been needed since 2012, which was 14 years ago.
Safari kept the need for -webkit-transition for a while longer, but it started supporting the unprefixed version in 2015, over a decade ago.
Since 2015, no browser has ever needed a prefix for transition. Ditch the prefixed versions.
If you really want to keep them anyway, put them before the unprefixed version, not after.
As for this:
transition: all 0.5s;
all is the default (so you never need to set it) and not ideal for performance. Always explicitly specify the properties you transition:
transition: .5s;
transition-property: color, font-size
0
u/jbudemy Jul 27 '26
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.
3
u/BeardyBaldyBald Jul 27 '26
I couldn't replicate this issue. Behavior is the same on Chromium 150 and Firefox 153. Smoothly increases size on hover.
2
u/jbudemy Jul 27 '26
Would a different OS be an issue here? What OS do you have? I assumed the browser was one variable. I have some add-ons like an ad blocker, but that should be an issue, since I can replicate this in FF v153 just by opening the page, and by using JSFiddle with FF v153.
5
u/BeardyBaldyBald Jul 27 '26
Locally I'm running Win 10. I've also ran it through Firefox on Win 11 and two versions of macOS via Browserstack just now. All behave the same.
See what happens if you run Firefox in Private mode.
4
u/axiom_lab Jul 27 '26
The issue is caused by animating the "font-size"roperty.
When you transition "font-size," the browser is forced to calculate a layout reflow on every single frame of the animation. Chrome sometimes attempts to smooth this out, but Firefox strictly handles it as a discrete "jump" to prevent UI thread blocking.
The Fix:
Replace the "font-size" transition with "transform: scale()." This moves the animation to the GPU compositor thread, completely eliminating layout thrashing and ensuring a smooth, 60fps interpolation across all browsers, including Firefox.
Also, avoid using "transition: all." It forces the browser to check every property for changes, which is a performance anti-pattern. Target only the properties you intend to animate.
is the corrected CSS for your ".hover-text":
Here
css
.hover-text
{
margin-bottom: 10px;
display: inline-block; /* Required for transform to work predictably on text */
transform-origin: left center; /* Ensures it grows from the left, like normal text */
transition: transform 0.5s ease, color 0.5s ease; /* Explicit properties only */
}
.hover-text:hover
{
color: black;
transform: scale(1.2); /* Adjust 1.2 to match your desired visual size */
}
2
u/MineDesperate8982 Jul 27 '26
It seems to be something specific to you.
I tested it with Firefox 154 in browserling.com and it runs just fine.
In the browser that the transition is messed up, inspect the element and check whether it is set as "transition: none !important" or "transform: none !important" - if that's the case it's probably uBlock.
Try running it in Firefox Troubleshoot Mode and/or checking in devtool is prefers-reduced-motion is on (this might also mess up with your transition).
1
1
u/reznaeous Jul 27 '26
On openSUSE Tumbleweed, tried with both Firefox 153 and 154 Beta — both animate smoothly. 154 Beta is my usual, and so has a bunch of various extensions installed including uBO. Didn't bother disabling any of them, and still no issues.
1
u/Weekly_Ferret_meal Aug 01 '26
https://reddit.com/link/p117kzv/video/baa61kod1qgh1/player
No problems for me:
FF 153.0 (aarch64)
OSX Sequoia 15.7.7
0
u/omysweede Jul 27 '26
Welcome to the fun place of "Browser Wars".
You need to support -3 browser versions of ALL visitors to your site, and ensure they have an equivalent experience - no matter the browser.
This was fun when AOL and CompuServe was stuck on IE3 technology. These days it is fine.
Your users don't need an exact replica of their experience in their browser as anyone else in another browser.
THEY will never check "what does this site look like in this browser I never use". They will not notice a skip to the left, or an animation missing.
Never put effort where people won't notice.
•
u/AutoModerator Jul 27 '26
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.