0

I am having some critical issues with CSS in Safari 7+. Mobile and Desktop... all other browsers load my page and CSS relatively fine. What did Apple really do with Safari 7+? This is bad since all iPhone users will be seeing this page as a jumble...

I can't see what the definite problem is but I see there is missing CSS. Here is a some of the CSS... hoping some sort of Safari Guru can see what the issue or (issues) are. It's the only major browser that's presenting these issues with my site. It seems the "user agent" is removing some of the CSS.

http://www.asumid.com is the site for reference... there's no better way to really preview it except loading the site in Safari 7/8 via Browserstack or if you have it on your machine.

    * {
    padding: 0;
    border: 0;
    margin: 0;
    font-size: 100%;
}
/* PRELOAD STYLES */
#pageload {
    position: fixed;
    background: rgba(17,17,17,.95);
    z-index: 1000;
    width: 100%;
    height: 100%;
    -moz-transition: background-color 1s ease-in-out;
    -ms-transition: background-color 1s ease-in-out;
    -webkit-transition: background-color 1s ease-in-out;
    -o-transition: background-color 1s ease-in-out;
    transition: background-color 1s ease-in-out;
    cursor: wait;
}
#preload_img {
    width: 100px;
    height: 120px;
    margin: 15% auto;
}
#preload_img img {
    width: 100%;
    height: 100%;
}
#preload_img span {
    -ms-animation: loading 2s ease-in-out .5s infinite normal;
    -moz-animation: loading 2s ease-in-out .5s infinite normal;
    -webkit-animation: loading 2s ease-in-out .5s infinite normal;
    -o-animation: loading 2s ease-in-out .5s infinite normal;
    animation: loading 2s ease-in-out .5s infinite normal;
    font-size: 100%;
    position: fixed;
    margin: auto;
    top: 45%;
    left: 48%;
}
h2.toConnect {
    position: fixed;
    bottom: 7em;
    right: 0;
    width: 100px;
    height: 75px;
    background-color: #777;
    background-image: url('images/jumptoconnect.png'), url('images/textures/stainlesssteel_001.jpg');
    background-position: center center, left center;
    background-size: contain, 200%;
    background-repeat: no-repeat;
    border-radius: 12px 0 0 12px ;
}
h2.toConnect:hover, h2.toConnect:active {
    background-color: #999;
    background-image:  url('images/jumptoconnect.png'), url('images/textures/stainlesssteel_001.jpg');
    background-size: contain, 200%;
    background-repeat: no-repeat;
    opacity: .75;
}
#pageload > div.close {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    background: #EEE;
    font-size: 2.5em;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    color: #555;
    border-radius: 0 0 0 12px;
}


/* ... */
Kald
  • 48
  • 7
  • Could you set up a fiddle so I can test it? – Rvervuurt Nov 14 '14 at 09:38
  • 2
    Also: I'm not going to click on a bit.ly link here. Probably no-one will. – Rvervuurt Nov 14 '14 at 09:40
  • no Fiddle account unfortunately otherwise I would link it – Kald Nov 14 '14 at 09:45
  • 1
    You don't need an account to make a JSfiddle. – Rvervuurt Nov 14 '14 at 09:48
  • There are TONS of [HTML issues](http://html5.validator.nu/?doc=http%3A%2F%2Fwww.asumid.com) on that asumid site. That's the first thing I check when browsers are acting differently from each other. As an aside, you don't need a jsfiddle account to make a new fiddle. – Dan Goodspeed Nov 14 '14 at 09:48
  • Dan Goodspeed, thank you for your comment. Do you care to clarify? The site works fine on all other browsers, and it works fine on Safari 6... there's definitely something Apple changed. There are HTML errors only due to necessities for certain Java/jQuery plugs... all the other HTML is valid as far as I know. Unless you care to point them out to me. – Kald Nov 14 '14 at 20:40
  • Hmmmm... don't need a fiddle account? I will try shortly then... – Kald Nov 14 '14 at 20:41

0 Answers0