css3 animation causing problems with parallax sections

Question

I am having a problem with css3 animations interfering with the parallax sections on my website. If you mouse over the icons, a css3 animation triggers and causes the parallax section to break. How can I fix this?

http://melissadanielle.net/test/

Here is some code :D

<div class="parallax" data-type="background" data-speed="2"></div>

.parallax {
    background: url(../img/worldImg.jpg) repeat fixed 50% 0px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 0px 0px 20px #000 inset;
}

// Parallax Scrolling
var $window = $(window); //You forgot this line in the above example

    $('div[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object
        $(window).scroll(function() {
        var yPos = -($window.scrollTop() / $bgobj.data('speed'));
        var yPosAdd = 220;
        var yPosFinal = yPos + yPosAdd;
        // Put together our final background position
        var coords = '50%'+ yPosFinal + 'px';
        // Move the background
        $bgobj.css({ backgroundPosition: coords });
    });
});

css3 animation

.columns i {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.columns i:hover {
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
     transform: rotate(720deg);
}

Answer 1

The problem is caused by relative positioning of .parallax

Remove relative positioning from this and it works fine.

.parallax {
  background: url(../img/worldImg.jpg) repeat fixed 50% 0px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  box-shadow: 0px 0px 20px #000 inset;
}

I found the problem but I am not sure why it is happening.