Firefox has a problem with negative margins?

[matt_sanford]

I have an animation that i have been working for a ridiculous(should have taken 10 mins) amount of time but now that i have it “working” firefox says “oh hell to the no. ” the animation is that an element rises up the screen via a negative margin, instead firefox thinks i am telling it to go the opposite direction. So it goes down 250px. I have searched the internet and seen people complaining of a negative margin in firefox but no fixes. Here is all the relevant code

.portfolio-thumbnail span {
font-size: 36px;
font-family: ‘Allura’, cursive;
position: relative;
display: inline-block;
margin-top: -15px;
text-shadow:0px 2px 11px #ffe3ba;
-webkit-animation: margin-slide-down;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-moz-animation: margin-slide-down;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-out;
-o-animation: margin-slide-down;
-o-animation-duration: 1s;
-o-animation-timing-function: ease-out;
animation: margin-slide-down;
animation-duration: 1s;
animation-timing-function: ease-out;
color: #000;
}

.portfolio-thumbnail img {
height: 100%;
width: 100%;
}

.portfolio-thumbnail:hover {
opacity: 1;
-moz-box-shadow: 0px 10px 54px #000000;
-webkit-box-shadow: 0px 10px 54px #000000;
box-shadow: 0px 10px 54px #000000;
-webkit-animation: blacktocolor;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-in;
-webkit-filter: grayscale(0%);
}

.portfolio-thumbnail:hover> span {
-webkit-animation: margin-slide;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-out;
-moz-animation: margin-slide;
-moz-animation-duration: .5s;
-moz-animation-timing-function: ease-out;
-o-animation: margin-slide;
-o-animation-duration: .5s;
-o-animation-timing-function: ease-out;
animation: margin-slide;
animation-duration: .5s;
animation-timing-function: ease-out;
margin-top: -250px;
color: #CC0000;
}

@-webkit-keyframes margin-slide {

from {
margin-top: -15px;
}

to{
margin-top: -250px;

}
}

@-moz-keyframes margin-slide {

from {
margin-top: -15px;
}

to {
margin-top: -250px;
}
}
@-o-keyframes margin-slide {

from {
margin-top: -15px;
}

to {
margin-top: -250px;
}
}
@keyframes margin-slide {

from {
margin-top: -15px;
}

to {
margin-top: -250px;

}
}

@-webkit-keyframes margin-slide-down {

from {
margin-top: -250px;
}

to {
margin-top: -15px;

}
}

@-moz-keyframes margin-slide-down {
from {
margin-top: -250px;
}

to {
margin-top: -15px;

}
}
@-o-keyframes margin-slide-down {

from {
margin-top: -250px;
}

to {
margin-top: -15px;

}
}
@keyframes margin-slide-down {

from {
margin-top: -250px;
}

to {
margin-top: -15px;

}
}

[Watson90]

Maybe try and style is using jQuery and use it’s slideUp function.

At least then it should be browser compatible too and save a load of markup.

[matt_sanford]

@ToxicFire You definitely helped me along the right track. I set the position of the span to absolute, but that moved to adjacent to the image even though the animation was working. Then set display to block, placing it under the img element. Thanks!

[Author]

Posts