Safari 8 vs Safari 9

Discussion in 'Web Design and Development' started by thoughton, Apr 14, 2016.

  1. thoughton macrumors newbie

    Sep 4, 2013
    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?

  2. Starfia macrumors 6502


    Apr 11, 2011
    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…?)
  3. thoughton thread starter macrumors newbie

    Sep 4, 2013
    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 :)
  4. thoughton, Apr 18, 2016
    Last edited: Apr 18, 2016

    thoughton thread starter macrumors newbie

    Sep 4, 2013
    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)

Share This Page