Render of SVG and Object in safari

You didn't tell us the version of Safari or the OS (Windows, Mac or both) that you are seeing the issues under.

Am on windows 7 using safari 5.1.7.

Should have thought about posting this good point cheers James.

Confirmed that your issue is showing up in Safari 4 - 5.1 on both Windows & OS X. Looks like the issue was fixed in Safari 6, which is a Mountain Lion (OS X) only version.

Are you using SVG filters by any chance, as they aren't supported before Safari 6.

Also your page doesn't validate, so you might want to check that out, it could be related.

Thanks for testing. Will check out the errors. Checked my code before integration to wordpress. That will teach me to keep checking my code.

I tried remove 100% from the object element and put a fixed height of 200px. Seemed to be working locally.

No SVG filter so can rule that one out.

Thanks for your help James.

I was thinking about the way I coded the navigation. i could have coded it with the logo as part of the navigation. Not sure if that is good idea?

example

From a UX perspective a logo as any sort of link usually has poor discoverability, and therefore is generally a bad idea.

IMHO there are better choices for a code playground than JSFiddle, as it doesn't show changes in real time. It requires you to refresh the code by pressing the run button to see the results.

Better choices include (in perference order):

• codepen.io
• dabblet.com
• CSS Deck

Thought that might be the answer and thanks for the links. Checking them out.