Tricking IE6-8 into Being an HTML5 Browser

Every browser has its own set of differences and quirks. For the most part, variety in CSS property names, dimensions, or known bugs are easily worked around. Many property applier functions in the HYPE.js runtime simply look like this:

var boxShadowValue = “” + xOffset + “px “ + yOffset + “px “ + boxShadowBlurRadius + ” “ + boxShadowShadowColor;

// webkit

element.style[“-webkit-box-shadow”] = boxShadowValue;

// mozilla

element.style[“MozBoxShadow”] = boxShadowValue;

// firefox 4.0+

element.style[“boxShadow”] = boxShadowValue;

// ie/standard

element.style[“box-shadow”] = boxShadowValue;

It isn’t always this easy. Supporting older versions of Internet Explorer (6-8) has its own set of challenges and many saving graces. Internet Explorer has a filter system that allows for a surprising number of effects, many of which have since become standard on modern browsers. For example, while the CSS3 “tranform:rotate(45deg)” syntax is not supported, IE’s filter system can allow the same through this CSS property:

element.style[“-ms-filter”] = “progid:DXImageTransform.Microsoft.Matrix(SizingMethod=’auto expand’, M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)”;

It might look ugly and requires additional repositioning of the element to match CSS3-supporting browsers, but it does work. For other CSS3 effects, such as background gradients, border radius, and box shadows (as seen above), Tumult Hype takes advantage of a project called CSS3PIE. If you’ve seen the “PIE.htc” file in its exported resources folder, that’s what it is for.

Video in older versions of Internet Explorer presents a more interesting problem. The HTML5 <video> tag is not supported, and there are no simple workarounds like CSS3PIE. We decided to fallback to the QuickTime plugin for displaying video. It is widely installed (thanks to iTunes) and can playback .mp4/.m4v videos which are typically used for the <video> tag on Safari/IE9+. Plugin loading can be delayed, so we had to use poll-based timing tricks to make sure attributes like autoplay, loop, and mute were being set properly.

The biggest downfall of Internet Explorer 6-8 is lack of support for transparent PNGs. There’s adequate workarounds in IE 7 and 8, but unfortunately IE6 is out of luck (hacks exist, but do not work well enough). Our recommendation is to use transparent gifs when this becomes a problem.

We’re mostly happy with standards support in IE9 and what we’ve seen of IE10.

Here’s a video we put together showing the Buckley’s Duckleys Ad across a variety of browsers:

http://www.youtube.com/watch?v=Ztl_-4FwP9I&html5=1

Avoidance of CSS3 for Animation

More interesting may be the decisions we made when approaching how to animate content across browsers. Animations historically were made using a quickly repeating timer in JavaScript (a “heartbeat”) and then programmatically changing the desired properties. Newer CSS3 features such as Transitions and Animations were developed to make this process easier for site creators and more efficient by processing inside the browser. With the goal of optimizing animation performance, Tumult Hype 1.0.x had a hybrid model of using CSS3 transitions and falling back to JavaScript hearbeat-based animations for older browsers or on unsupported transition properties. We did not use CSS3 Animations because Safari (Mac/iOS) and Chrome were the only two browsers supporting it during initial development. To make sure the timing functions (ease-in, ease-out, etc.) were identical, we even transcribed WebKit’s UnitBezier.h into JavaScript using identical control points.

Ultimately, we found the approach of using CSS3 Transitions had several drawbacks:

• Timing Issues – There are no specific guarantees for when a CSS3 Transition will actually kick off, which is important given our dynamic animation system. It is therefore not possible to synchronize different elements together. This also applies for the same element; when we introduced the heartbeat-based bounce timing function in Tumult Hype 1.5, we found there were jumps in the animation playback between the CSS3 Transition and our bounce animation since the transition had not started at the time we expected.
• Lack of Control – CSS3 transitions and animations give no affordance for fine-grained pausing or frame steps. While Tumult Hype does not support these now, we’d like to give greater flexibility in the future.
• Syntax – The code for an CSS3 transition is most typically made with a single string property on the element. While not impossible to work with, it is unwieldy and we would prefer being able to have control from JavaScript directly. It is unfortunate for tool creators such as ourselves that the direction of many new CSS properties is to use string lists instead.

We abandoned using CSS3 Transitions in Tumult Hype 1.5 for the reasons listed above. It’s also a new technology, and not without a few bugs we hit. From a performance standpoint, the impact was minimal and we also adopted the requestAnimationFrame API so several of the browser optimizations could still be applied. We also found it simplified our code, testing, and will allow for more features in the future since full control is in our hands.

Other Considerations

With the reignited rapid pace of browser development, we’ve also run into many bugs/regressions that have appeared in updates. Some of these include not being able to see fullscreen videos in Safari, random blue page backgrounds in Chrome, and not being able to rotate and move elements at the same time in iOS and Mac Safari. WebKit regressions can be especially nasty since they may also affect the Tumult Hype application. Sometimes we can workaround them with alternate methods of doing the same manipulation — in the rotation bug’s case we used -webkit-transforms’s translateX/Y instead of setting the CSS style.left/top properties. Other times we must simply wait it out until the browser vendor has a fix.

One of our goals for Tumult Hype is to always adopt the bleeding edge of new HTML and CSS features. Because of this, we realize no matter how much effort we put into supporting older browsers, some capabilities (like 3D transformations on IE6) will simply be infeasible. For these features, we developed a warning system in the Hype application itself. In the Document Inspector (command-1) you can select which browsers you would like to support, and thus see warnings for when using an unsupported feature. These appear both in the inspector and in a summary list at export time. While it is no substitute for testing across different browsers, the system does act as an early way to detect possible compatibility issues.

Tumult Hype arose out of the need for a creative tool to create animations on the web without dredging through code, browser inconsistencies, and learning a complex program. We work hard to keep web animation simple so users don’t have to!