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;
}
/* ... */