Safari and Flash Don’t Play Well Together

There are a lot of cool effects that we see across the internet, many of which use flash. Unfortunately, while flash is a great tool for slideshows, animations, and other interactive features, it is not good for search engine optimization. This is because much of the flash content such as text, links, and images, cannot be indexed by search engines. And even though some engines, such as Google, are capable of indexing some content in flash files, simple HTML text is still the best option for complete indexing of your website.

As a result, some webmasters create HTML web pages and simply embed flash elements. This way, all of the textual content and links can be indexed. Some webmasters have even opted to place HTML elements over flash, to have the best of both worlds; an interactive website and search engine optimization. Unfortunately, these div overlays are not cross-browser compatible.

Typical Approach for a Div Overlay

To overlay your flash element with HTML, you generally do three things:

1. Use a parameter known as wmode and set it to transparent. It should be added to the embed tag. In addition, you need to create a parameter tag as shown below.

<param name="wmode" value="transparent">

2. Create a div element containing your HTML text and absolutely position it over your flash element using CSS.

3. Set a z-index for both elements to set which element is ‘on top’.

This method will work in most browsers. Unfortunately, there is one browser which has a problem rendering the code properly. This browser is Safari version 2 for Mac, which has a problem rendering the wmode parameter. This often results in ‘flickers’ or disappearing parts of an element.

The Solution…?

Unfortunately, there is no quick solution to solve this problem. But here are three options that you might consider:

1. Providing alternative content to Safari 2 users, or simply including a message stating that the website is best viewed on the latest version of the browser. (Currently, Safari 3 is available for download.)
2. Opting for something else besides a div overlay, and the need to use the wmode parameter.
3. Using JavaScript and AJAX to achieve the flash effects.

What do we suggest?

It is probably not best to alienate the visitors who use Safari2, so we suggest simplifying your web page or opting for JavaScript. If you’re wondering if JavaScript can achieve the effects that you’ve probably created in flash, it can. Be sure to take a look at some great JS libraries such as Scriptaculous, Prototype, and JQuery, which are great building blocks for any application.

The flash icon that we included is courtesy of VistaIcons.com, a great source of free Vista-style icons.