Safari 8 vs Safari 9

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

  1. thoughton macrumors newbie

    Joined:
    Sep 4, 2013
    #1
    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!
     
  2. Starfia macrumors 6502

    Starfia

    Joined:
    Apr 11, 2011
    #2
    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

    Joined:
    Sep 4, 2013
    #3
    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

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

    Code:
    /* 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).

    Code:
    /* 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