Safari 8 vs Safari 9

[thoughton]

Hi folks,

I've got a bit of a mystery here. I have an element which is in a different position on one Mac on Yosemite/Safari 8 when compared to another Mac on Yosemite/Safari 9.

I've looked at the page on 4 different Macs, the 3 with Safari 9 (1 Yosemite, and 2 El Capitan) all render it correctly, but the Safari 8 Mac doesn't.

The rendering bug is a small thing. It's just that in Safari 8 one button (a <li>) is approx 70-80 pixels too low. Everything else on the page is identical to the Safari 9 version.

I don't know for sure it is Safari 8 that is causing the problem, but it sure looks like it. I wasn't aware that there could be any differences in CSS rendering between two new-ish versions of Safari.

Any tips?

Cheers!

 

[Starfia]

Um… it's not impossible there could be a bug like that – it could be some incredibly specific case of interpretation or something, but I agree it's surprising. I don't think I have any other ideas without being able to check out the page in question, and no information about the page's appearance in any other browsers. (Not even Safari 7 or earlier? Could it have been some extremely subtle list-related standards change at that point in time…?)

 

[thoughton]

Thanks for the input. It displays without any issues in current Firefox and Chrome so it seems to be just a Safari thing. The site is still in development so I can't share a URL in public (but I can PM it if anyone thinks they might know something).

This morning it looks like I'm going to be setting up virtual machines, solely to test Safari 7 and 8. What a PITA

 

[thoughton]

I've now finally got Mavericks running in Virtual Box.

I've ended up targetting Safari 7.1 and Safari 8 using this code from this page (where 'li#listname' is my rogue button):

/* Safari 7.1 -8.0 (Safari 7.1+)
_::-webkit-full-page-media, _:future, :root li#listname {
top: -28px;
}

[To be frank I'm not clear what '_::-webkit-full-page-media, _:future' achieves, or why there is a comma there.]

This works in Safari 7.1 and Safari 8 only. Howeer I have also discovered (much to my surprise) that Mavericks installs with Safari 7.0.

It took a while but eventually I found a way of targetting Safari 7.0 only. When I found this snippet it was advertised as Safari 7.0+, but in my testing it has no effect on Safari 7.1 (or at least isn't cumulative with the CSS rule above).

/* Safari 7.0 (Safari 7.0 only)
@media \\0 screen {
   li#listname {
   top: -28px;
   }
}

(Note that -28 pixels appears to be half of the erroneous offset that Safari 7 and 8 are showing)