Big heavy images are responsible for most of the bloat on a responsive website, but it doesn’t have to be that way. Here’s the latest HTML elements you can use to keep your images small, and your site lean & fast.
Presented at Coffee & Code on July 1, 2014.
Blog post: matthew-steele.com/responsive-images-picture-srcset/
“Which CSS preprocessor language should I choose?” is a hot topic lately. I’ve been asked in person several times and an online debate has been popping up every few days it seems. It’s nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let’s do this thing.
Today we’ll discuss how to improve the paint performance of your websites and Web apps. This is an area that we Web developers have only recently started looking at more closely, and it’s important because it could have an impact on your user engagement and user experience.
Nice summary on Smashing Magazine!
The HTML(5) version of our SCORM based e-learning runtime heavily uses i-frames as template containers. This architecture gives a lot of flexibility but since customers mainly request iPad support we where very unhappy with Safari’s rendering capabilities on iOS. Of course we use CSS transform to get the best animation performance on mobile devices, but in Apple’s mobile browser you’ll likely see huge clipping rectangles during hardware accelerated transitions.
There was not much information about that issue online but at least this entry on stackoverflow suggested there is not much you can do. Well, it took a lot of trail an error testing time but finally we nailed it. The solution is quite simple:
Whenever you use CSS transform with i-frames or it’s parents you also need to apply a basic CSS transform to the body tag of your i-frame content. That’s it. You can also use other contents within the loaded frame HTML page but the body tag seems to be the perfect target.
// Reference to your iFrame HTML element var iFrameElement = document.getElementById( "yourIFrameID" ); // Avoid clipping by applying simple css transfrom3D to the iframe content itself $( iFrameElement.contentWindow.document.body ).css( "-webkit-transform", "translate3d(0,0,0)" ); // Start your iFrame transition (from a visible position) $( iFrameElement ).css( "-webkit-transform", "translate3d(-1000px,0,0)" );
UPDATE: Make sure you start from a visible position!
Don’t forget to remove CSS transform after your animation is done:
// Don't forget to reset after your transition has finished! $( iFrameElement.contentWindow.document.body ).css( "-webkit-transform", "none" );
I suggest to use “none” as the default value. We sometimes experienced weird behavior using an empty string…
Have fun coding!