Presence of video affects Cufon text in Safari

Question

Website: http://ghostpool.com/wordpress/slide/

If you click the "+" button in the bottom left corner to reveal the footer the cufon heading text quickly moves or disappears in Safari (using 5.0.3). The problem occurs in no other browser. If I remove or hover over the video from the fifth slide in the slider or show the footer by default with no toggle feature the problem goes away. This means there must be an issue with the presence of videos and cufon in Safari. Any help in fixing this issue is appreciated.

Answer 1

Ok I've managed to solve this issue with CSS fix.

The cufon text is given a position: relative by default, you need to overrule this with position: static. Add the following to your style sheet.

  h3 cufon,
  h3 canvas {
  position: static !important;
  }

Change h3 to whatever element you want to apply it. You need to readd position: relative styling to Internet Explorer as it doesn't handle position: static too well. So add this to a IE specific style sheet.

 h3 cufon,
 h3 canvas {
 position: relative !important;
 }

Answer 2

After asking the creator of Cufon about this bug he replied with this

https://github.com/sorccu/cufon/issues/199

" Hi, I haven't come across this before, but you might want to try adding z-index (pretty much any value other than auto) to the positioned cufon elements instead of removing the positioning. It just might do the trick. Alternatively, you could try adding z-index to the video itself (or making it positioned if it isn't already).

Please let me know how it goes. Also, I think that this issue probably affects canvases in general. The Safari team will probably fix it on their side (sooner or later..) There are also other possibly related issues on that site, for example the submenus are sometimes left partially rendered.. see attachment (if it works).

The next version (1.10) actually no longer uses positioning so I guess the issue might go away then. But please do not ask when it's going to be released because I have no idea.

-Simo "

it appears that adding a z-index value of anything but auto will fix this issue as well. Using position: static limits the control of the Cufon'd text too much

I also found it simpler to use

*.cufon-canvas { 
  z-index: 0;
}

instead of the fix that GhostPool suggested.

The only thing I do not like about either of these fixes is if you try to nest a span tag in any block of cufon and try to change its position attribute. It sort of ignores the z-index fix.