Divs overlapping h1 only in chrome - css

Question

I am new to web development and am creating a website portfolio. My website is www.laurenschaller.com. Everything is working the way I want it to, except sometimes (not always, if I refresh it goes back to normal) when I open it up in chrome, the two waves that wrap the text "Who I Am" overlap that text, like this http://imgur.com/Zxt7bEE
here is the html:
<div class="wave1div">
<div id="waveBlue1"></div>
<img class="wave1" src="img/loadingwave.png" alt="leftwave">
</div>
<div class="whoIAm">
<h1>WHO I AM</h1>
</div>
<div id="waveBlue2"></div>
<div class="wave2div">
<img class="wave2" src="img/loadingwave.png" alt="rightwave">
</div>
</div>
<!-- Waves end -->
and here is how I styled it:
.waveHeader {
text-align: center;
}
.wave1div, .wave2div, .whoIAm {
display: inline-block;
}
.wave1div, .wave2div, #waveBlue2 {
position: absolute;
top: 270px;
}
.wave1, .wave2{
width: 200px;
position: absolute;
display: block !important;
}
#waveBlue2, #waveBlue1 {
height: 43px;
background: $blue;
position: absolute;
display: inline-block;
text-align: center;
}
#waveBlue1 {
width: 0px;
max-width: 198px;
right:15px;
bottom:-43px;
margin-left: -50px;
}
#waveBlue2 {
max-width: 200px;
}
.prog-bar1, .wave1 {
left: -213px;
}
I apologize if any of that is poorly coded. Like I said, I am very new to learning and appreciate the help.

Answer 1

I would delete the "waves" divs and just leave the heading, like this:
<section class="about">
<h1>WHO I AM</h1>
</section>
Then add the waves as a background for the :before and :after pseudo elements on the heading itself.
.about h1:before, .about h1:after {
content:'';
width:200px;
height:44px;
display:inline-block;
background:url('img/loadingwave.png') no-repeat;
background-color:#86c3c1;
background-size:200px 44px;
}
.about h1:before {
margin-right:30px;
}
.about h1:after {
margin-left:30px;
}
Pseudo elements are very cool and you can do a lot of effects with them. Have a read:
Learning To Use The :before And :after Pseudo-Elements In CSS
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
Another way that you can do this is by putting the content of your heading inside a span, like this:
<h1><span>WHO I AM</span></h1>
Then you can set the background of the span to white and have the waves as the background for the h1 element:
.about span {
background:#FFF;
}
.about h1 {
background:url('files/wave-orig.png') center repeat-x;
background-color:#86c3c1;
background-size:200px 44px;
}
You have to fix up a lot of your markup if you decide to go the span way though - make your headings block level elements, declare proper heights, adjust your container's width etc.
I'm just telling you about this as another option, but the pseudo element way would be the easiest to implement with your current layout.
By the way, I also noticed that you are using margin-bottom:rhythm on a fair amount of your elements - that's not valid CSS and it doesn't do anything.