The full source can be viewed at: www.anthonysusedcars.com
Chrome Status: Works!
Safari Status: Broken!
Firefox Status: Untested
Question:
What is causing this webpage to break within Safari, while Chrome renders it fine? Can anyone figure out a quick fix?
Note: there is a bug in Chrome, where if you hover over the left-most, non selected, nav tab, the whole page is thrown into disarray. Ignore this for now.
Supporting Details [Extra]
Google Chrome shows this page with an interesting effect that I stumble upon by accident with basic CSS3. The navigation tab pulls down while pulling the upper header and lower content downward with it, but the rest of the navigation tabs stay in place.
It threw me off when I looked at the site in Safari, expecting seamless webkit compatibility, to find a very broken page. I then read about Chrome's recent change to Blink. So, scrap the chanced-upon feature and go with something easier to replicate cross-browser, right?
Well... My boss likes the feature the way that it's seen in Chrome, and wants me to fix it up to work cross-browser. And that's that. I've failed to fix the issue thus far, so i'm turning to the experts!
I'm focusing here on simply Webkit - Blink compatibility. The solution to this problem needs to solve both the broken position, and keep the movement functionality.
HTML Markup [Simplified]
<!DOCTYPE html>
<html>
<head>
... Content ...
</head>
<body>
<div class="wrapper"><!-- begin wrapper -->
<div class="frame_anchor"><!-- begin frame anchor -->
<div class="header_frame"><!-- begin header frame -->
<div class="nav_bar"><!-- begin header nav bar -->
<a id="selected" href="index.php">
Home
</a>
<a href="car1.php">
Dodge Avenger
</a>
<a href="car2.php">
Jeep Grand Cherokee
</a>
<a href="car3.php">
Chevy Suburban
</a>
<a href="contact.php">
Contact Us
</a>
</div><!-- end head nav bar -->
</div><!-- end header frame -->
</div><!-- end frame anchor -->
<div class="body_center"><!-- begin body center -->
<div class="header"><!-- begin header -->
<div class="header_image"><!-- begin header image -->
<div class="header_title_strip"><!-- begin header title strip -->
<p class="title">
ANTHONY'S AUTO
</p>
<p class="subtitle">
USED CARS AT GREAT PRICES
</p>
<p class="contact_title">
Cell: (318) 332 2031
</p>
</div><!-- end header title strip -->
</div><!-- end header image -->
</div><!-- end header -->
<div class="body"><!-- begin body -->
<div class="body_head_spacer"><!-- begin spacer -->
</div><!-- end spacer -->
<div class="module_title">
<p>
ABOUT US
</p>
</div>
<div class="body_desc"><!-- begin body description -->
<p>
We sell nice, clean cars in good condition, ready for the highway.
</p>
</div><!-- end body description -->
... Content ...
<div class="footer"><!-- begin footer -->
... Content ...
</div><!-- end footer -->
</div><!-- end body center -->
</div><!-- end wrapper -->
</body>
</html>
CSS: [Gradients Removed]
@import url(http://fonts.googleapis.com/css?family=Orbitron:400,700);
body
{
font-family:Arial;
... cross-browser gradient bg ...
}
a:link, a:visited, a:active, a:hover
{
}
p
{
}
div
{
}
.wrapper
{
margin:0px;
padding:0px;
width:100%;
min-height:800px;
}
.body_center
{
overflow:hidden;
transition:min-height 1s;
... cross-browser gradient bg ...
width:800px;
min-height:800px;
margin-left:auto;
margin-right:auto;
-webkit-box-shadow: 7px 7px 5px #000;
-moz-box-shadow: 7px 7px 5px #000;
box-shadow: 0px 0px 80px 7px #000;
padding:0px 0px 0px 0px;
}
.header_image
{
-moz-transition:min-height 1s, background-size 1s;
transition:min-height 1s, background-size 1s;
z-index:2;
background-position:65% 0%;
background-size:100% 160%;
background-repeat:no-repeat;
background-image:url('images/head.png');
position:absolute;
max-height:300px;
min-height:300px;
width:800px;
margin-top:-250px;
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
}
.header_title_strip
{
z-index:2;
opacity:1;
position:absolute;
padding:0px;
width:100%;
height:100px;
... cross-browser gradient bg ...
transition:opacity 2s, height 2s;
-moz-transition:opacity 2s, height 2s;
}
.contact_title
{
float:right;
color:#ffbb28;
margin-right:20px;
font-family: 'Orbitron', sans-serif;
}
.header_title_strip:hover
{
opacity:1;
height:120px;
}
.title span
{
float:left;
display:block;
width:30px;
/* -webkit-transform:rotate(0deg); */
transition:/*-webkit-transform 0.1s,*/ color 0.5s, text-shadow 0.3s;
text-shadow: 4px 4px 4px #000;
}
.title span:hover
{
/* -webkit-transform:rotateY(180deg);
color:#2580be;
*/
text-shadow: 5px 5px 7px #000;
}
.space
{
float:left;
width:20px;
overflow:hidden;
opacity:0;
}
.title
{
position:absolute;
word-spacing:-8px;
top:-15px;
padding:0px 0px 0px 10px;
font-size:35px;
color:white;
font-family: 'Orbitron', sans-serif;
}
.subtitle
{
position:absolute;
margin:55px 0px 0px 10px;
font-size:18px;
color:#ffb400;
font-family: 'Orbitron', sans-serif;
}
.frame_anchor
{
width:800px;
height:20px;
margin-left:auto;
margin-right:auto;
}
.header_frame
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
transition:height 1s;
position:relative;
margin-left:-20px;
top:90px;
z-index:0;
padding:0px 20px 0px 20px;
width:800px;
height:250px;
... cross-browser gradient bg ...
opacity:.77;
}
.nav_bar
{
transition:margin 1s;
padding:210px 0px 0px 0px;
width:100%;
height:70px;
position:relative;
z-index:2;
}
.nav_bar a:link, .nav_bar a:active, .nav_bar a:visited
{
margin-top:0px;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
float:left;
text-decoration:none;
color:black;
display:block;
height:30px;
font-weight:bold;
font-size:12px;
margin:0px 0px 0px 20px;
padding:15px 10px 0px 10px;
text-align:center;
... cross-browser gradient bg ...
border-style: inset;
border-width:0px;
opacity:1;
-moz-transition:opacity 0.1s, box-shadow 0.2s, margin-top 0.2s, padding-top 0.2s;
transition:opacity 0.1s, box-shadow 0.2s, margin-top 0.2s, padding-top 0.2s;
border-radius:0px 0px 5px 5px;
}
#selected
{
... cross-browser gradient bg ...
}
#selected:hover
{
padding-top:15px;
}
.nav_bar a:hover
{
padding-top:20px;
opacity:1;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px -5px 20px #000;
}
.body_head_spacer
{
transition:min-height 1s;
min-height:105px;
}
.body_desc
{
-webkit-box-shadow: 250px -30px 70px -40px#000;
-moz-box-shadow: 250px -30px 70px -40px#000;
box-shadow: 250px -30px 70px -40px#000;
-moz-transition:min-height 1s;
transition:min-height 1s;
position:relative;
top:0px;
z-index:0;
padding:5px;
width:790px;
min-height:250px;
... cross-browser gradient bg ...
opacity:.77;
margin-top:0px;
}
.body_desc p
{
padding:5px;
margin:0px;
background-color:white;
min-height:20px;
text-align:center;
}
.body_module
{
-webkit-box-shadow: 250px -30px 70px -40px#000;
-moz-box-shadow: 250px -30px 70px -40px#000;
box-shadow: 250px -30px 70px -40px#000;
-moz-transition:min-height 1s;
transition:min-height 1s;
position:relative;
margin-top:0px;
top:0px;
z-index:0;
padding:5px 5px 5px 5px;
width:790px;
min-height:180px;
... cross-browser gradient bg ...
opacity:.77;
}
.footer
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
-moz-transition:min-height 1s;
transition:min-height 1s;
margin-top:30px;
top:0px;
z-index:0;
width:800px;
min-height:70px;
... cross-browser gradient bg ...
opacity:.77;
}
.footer p
{
padding:25px 10px 10px 10px;
min-height:20px;
text-align:center;
color:white;
}
.module_title p
{
margin:0px;
padding:10px 5px 5px 0px;
min-height:20px;
}
.module_title
{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000;
box-shadow: 0px 0px 30px #000;
font-family: 'Orbitron', sans-serif;
font-weight:bold;
color:#2454e5;
transition:height 1s;
position:relative;
z-index:0;
text-align:center;
margin-top:20px;
padding:5px 5px 5px 5px;
width:25%;
min-height:35px;
... cross-browser gradient bg ...
opacity:.77;
border-radius:0px 170px 0px 0px;
}