I'm starting to dread debugging Safari

K, I’m working on an ad for a client on a responsive site. I have it working in every browser we support except Safari Mac. Bedevilingly, it works on the iPhone and iPad so I’m completely stumped.

The problem is that the background of a div completely disappears. I tried adjusting the CSS to just a solid color, something IE 6 could get right. No dice.

Has anyone run into a problem like this?

In the meanwhile I’ll have to get permission to show the work in progress from management - hopefully someone has seen this behavior out of Safari before.

That said, I’m starting to dread debugging Safari almost as much as I used to loathe IE 6.

Are you trying to debug with Safari on a Windows computer? The version for Windows is behind several versions from the one that is found on iOS and OSX, and I wouldn’t recommend testing with it.

Nevermind - found the issue. A block of JS setup to find out if Safari was miscalculating the Viewport Height stopped working - since Apple apparently fixed the calculation, but busted the view heights unit on the div height. I was setting

height: 90vh;

on a parent element. I know what some of you are thinking - why not

height: 90%;

Well, I had a bit of js sniffing the height of the element. Safari’s viewport height bug causes the element to calculate out higher than the body, which is impossible. Upon detecting this, I remove a class that enable viewport units entirely.

Now, Apple apparently fixed the height bug, but doesn’t render backgrounds on elements with a vh unit height (or it’s miscalculating the height as 0). Either way, I was forced to just turn off view units entirely with Safari using a specific browser sniff. Which is a technique I find distasteful.

It’s one thing to not implement a CSS feature - quite another to implement it wrong, which Apple has been doing a lot of here recently.

I’ve seen a few bugs with the vh unit when trying to get full height which were resolved by setting html,body to height 100%.

Unfortunately there are still browser bugs and differences about ready to trap the unwary but it’s a lot better than it used to be :slight_smile:

Tried doing that, to no avail. For the moment, I’m just avoiding view units - they are a nice to have, not a requirement.

I have Sarari 5.1.7 Windows 7

I admit I don’t test too deeply with it. Because I know the Windows version is “crippled” a bit.

HTML5 and CSS3 are exciting, but I still consider them as “fun to play with”