deldalton Posted January 3, 2014 Share Posted January 3, 2014 (edited) 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 January 6, 2014 by deldalton Link to comment Share on other sites More sharing options...
deldalton Posted January 6, 2014 Author Share Posted January 6, 2014 Just added the related code. Link to comment Share on other sites More sharing options...
deldalton Posted January 13, 2014 Author Share Posted January 13, 2014 I've still been unable to find a reason for this behaviour yet (perhaps I'm Googling the wrong keywords). Has anyone had the opportunity to have a look? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now