Jump to content

CSS3 Font Transitions: Unexpected Effect


Recommended Posts

I've just been playing with CSS media queries and transitions, to apply different layouts to different screen sizes, and I came across an unexpected effect when testing in Internet Explorer 11 and Google Chrome. Firefox doesn't seem to be affected, and reacts in the way I would expect.


In this example there are three div elements, one of which is a container. Here is the HTML.

<div id="container">	<div id="heading">HEADING</div>	<div id="links">		<ul>			<li>Link 1</li>			<li>Link 2</li>			<li>Link 3</li>			<li>Link 4</li>			<li>Link 5</li>		</ul>	</div></div>

I applied a CSS transition that would resize the height of both div elements, as well as the font within them; all in just 0.5s. Here's the CSS.

/* Below is the default styles */html, body, div, img, p, span, header, nav, ul {	margin: 0 auto;							border: 0;							padding: 0;							font-size: 1em;							position: relative;							-webkit-transition: height 0.5s ease, font 0.5s ease;							transition: height 0.5s ease, font 0.5s ease;												}												ul {	list-style-type: none; }li {	display: inline; }#container {	 }												#heading {	width: 100%;		height: 200px;		background-color: red;		font-family: "segoe ui light";		font-size: 50px;		color: white; }#links {	width: 100%;		height: 50px;		background-color: blue;		font-family: "segoe ui light";		font-size: 30px;		color: white; }/* Below is the styles applied to medium sized displays (tablets etc.) */@media screen and (min-width: 701px) and (max-width: 900px) {												#heading {	height: 100px;		font-size: 40px; }#links {	height: 40px;		font-size: 20px;}					}/* Below is the styles applied to small displays (mobile phones etc.) */@media screen and (max-width: 700px) {#heading {	height: 50px;		font-size: 30px; }				#links {	height: 30px;		font-size: 15px; }}

The height of both div elements are applied simultaneously, with the transition completing in 0.5s. However, the amendment to the size of the font doesn't apply simultaneously and, in fact, were amended almost as if they were triggered separately at different times. That is, the first div was affected by the change, which took 0.5s. Then, the second div was affected by the change, which took an additional 0.5s. So, the font transition took a total of 1s to complete. But, by definition, I would have expected the transition to be applied to both div elements at the same time and to complete within 0.5s just like the height.


Is anyone aware of any reason why the font transition may be interpreted differently to the height transition?

Edited by deldalton
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...