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.
