Flickering image buttons in Safari

If you want different images for different states of a button, Hype allows you to set a different image for each using a Textured button, which works great in Firefox, Chrome etc.

The problem comes in Safari, where when you hover over a button, instead of displaying the new image immediately, the button disappears for a second, and then the new image appears. This is repeated whenever you hover, not just the first time, so that it doesn’t appear to be an image loading issue.

The only solution I have for this is to create a group for each button containing the images as separate DOM elements and animating their opacity, which is rather tedious, and not entirely optimal.

How do you handle the button flicker issue on Safari?

This is an issue with the caching settings on your server.

Here’s a demo document with an image shown on hover: buttontest.zip (176.5 KB)

When I host this document on Dropbox’s public folder (which has no caching for elements), there’s a noticeable flicker: https://dl.dropboxusercontent.com/spa/i71vl1oentnckw0/Exports/buttontest/buttontest.html

When I host it on our server there’s no flicker, since the images preloaded are allowed to enter the browser’s cache: http://tumult.com/support/examples/2665-ButtonHoverTest/buttontest.html

When you inspect the actual image in Safari’s developer console, you can see the different properties which tell the browser to store the element in memory:

Via Dropbox

Via Tumult.com

We use a caching service called ‘Cloudflare’ which handles element cache management

This used to be more pronounced in Chrome, but they may be doing something different now. I’m not seeing this issue in Firefox.

To fix this issue, you can use the .htaccess file from this thread: Fixing broken video, audio, & fonts and configuring your server to correctly serve content under the correct content-type

I see. Many thanks.

It’s good to know that it will work as expected once uploaded to a proper server, although sharing preview versions with clients may be a bit more tricky. It doesn’t appear that I can use the htaccess file on Dropbox, or at least it doesn’t seem to have any effect. I guess I could always upload it on my own website and share it from there.

This should probably be a separate question, but do you have any tips on what to use instead for sharing previews of Hype projects?