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?
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:
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?
