Search code examples
jqueryvideosafaricufon

Presence of video affects Cufon text in Safari


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.


Solution

  • 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;
     }