michael_morris1 — 2014-07-10T14:40:45-04:00 — #1
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.
force — 2014-07-10T15:54:45-04:00 — #2
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.
michael_morris1 — 2014-07-10T16:49:36-04:00 — #3
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
on a parent element. I know what some of you are thinking - why not
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.
paulob — 2014-07-11T05:20:19-04:00 — #4
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
michael_morris1 — 2014-07-11T10:58:12-04:00 — #5
Tried doing that, to no avail. For the moment, I'm just avoiding view units - they are a nice to have, not a requirement.
mittineague — 2014-07-11T12:35:18-04:00 — #6
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"