Flickering image buttons in 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