[Solved] CSS3 flip animation gives me a horizontal scrollbar :-(

[First Things]

Hello dear reader!

I’m bussy with making my own website.

I choose to show a CSS3 flip animation on my homepage.

I used this article for it…

http://davidwalsh.name/css-flip

It took me a long time to let it work in all good browsers (f*** IE). At the end i used the code from the demo – page and i thought everything was okay :-)

But today i find out that in Firefox there is a long horizontal scrollbar showing up. Pfffff. I tried some things but didn’t find the sollution.

Can anyone set me in the right direction and learn me something more about the new CSS3 animations.

Here is the homepage:
http://www.firstthings.be

Extra info:
flip-thing-all.css has al the specific code for the flipthing. When i take this code out. The scrollbar dissapears, so i do believe the sollutions should be find in that code…

Thanks for reading, and sollutions,…

Kristof

[Paulie_D]

..in Firefox there is a long horizontal scrollbar showing up.

Not in my FF (30) there isn’t.

[First Things]

Thanks Paulie_D for the quick response :-)

My version was 29, i updated to 30 and it disappeared.

It’s okay know for me, but others that have tips or solutions for version 29, let me now. Still have the learn a lot about CSS3 animations (like the browsers themself :-p )

Kristof
http://www.firstthings.be

[paulob]

Hiding the overflow should solve the problem with any luck.

.flip-container{overflow:hidden}

[First Things]

Hello paulob,

Think your solution should do the trick, didn’t think off that… but it makes sense…

Added it just now and everything still works. But my version of firefox is now 30. Will find a solution for checking it.

So thanks a lot for the response Paulob!

Kristof

[paulob]

Hi,

Actually I just noticed that the fix I suggested clips the element when it spins so may not be the best solution. Perhaps adding overflow to a parent may be better but you may still get a clip at the bottom of the screen unless you add a little bit of bottom padding.

.vierkantBox{overflow:hidden;padding-bottom:10px}

[paulob]

Hi,

Hold that thought :)

I think the error is caused by the text-indent in .subtitle.

.subtitle {
    width:150px;
    height:150px;
    display:block;
    /*text-indent:-9999px;*/
    color:#F9F9F9;
    text-align:center;
    font-weight:bold;
}

You have text-align:center and text-indent which doesn’t make sense and seems to confuse Firefox 29. I tested locally and removing the text-indent makes the scrollbar go away (testing in Firebug did not give the same results as local testing so I need to see it n place in your site to test fully). (My Firefox version is about to update to 30 (when I restart it) so I’ll only be able to test this for a while.)

[First Things]

Hi Paulob,

I tested the first solution ( .vierkantBox{overflow:hidden;padding-bottom:10px} ) but gives the same result.

Now removed the text-indent, hope this will do the trick.

Thanks a lot Paulob!!
Kristof

[paulob]

Yes that’s now working fine in my Firefox 29 :)

Sorry for the run-a-round.

[First Things]

Thanks a lot Paulob!

And no sorry for the run-a-round. From trail and error we learn also ;-)

In other situations i will think faster about the hidden overflow and this will do the trick in some situations.

So big thank you for the support Paulob :-)

Kristof

[Author]

Posts