Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Flavio Carvalho
Flavio Carvalho
26,636 Points

Browser bug with position and transform

Hi there,

Anyone knows a fix or can point me out somewhere that explains how to go around a Firefox bug with position: fixed elements and transform: translation.

My problem is I have a sidebar with a form. The wrapper of the sidebar is in position: fixed, and it translates when the button is clicked to bring it on the page. All of that works fine... Except...

The form is actually longer then say +or- 650px, which means in smaller screen the browser should scroll down. It works just fine in Chrome and Safari... but Firefox is giving me grief.

What I noticed is the padding of the parent (the sidebar itself), seems to collapse with the element inside, so basically it's not scrolling the extra 50px set at the bottom.

Anyways... anyone knows a fix for this bug with Firefox or can give me references?

Thank you very much.

Alex Lasek
Alex Lasek
11,536 Points

Can you create a codepen for that? cheers

John Norris
John Norris
22,455 Points

Can you add your code here or link to it plz?

1 Answer

Flavio Carvalho
Flavio Carvalho
26,636 Points
Flavio Carvalho
Flavio Carvalho
26,636 Points

The basic html structure is a div with a form inside:

 <div id="submit_news" class="open"> 
    <form id="add-post-form" class="add_more" action="" method="POST" enctype="multipart/form-data">

    </form> 
</div>

CSS for the form is really just a display block.

The CSS for the div.

#submit_news { 
background-color:rgba(239,239,239,0.95);
overflow-y:auto;
position:fixed;
z-index:8000;
right:0;
top:0;
text-align:left;
font-size:14px;
height:100%;
transition:all 0.3s linear;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
-o-transition:all 0.3s linear;

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
}

#submit_news{
    width:640px;
    padding: 50px;
    transform:translateX(640px);
    -moz-transform:translateX(640px);
    -webkit-transform:translateX(640px);
    -ms-transform:translateX(640px);
}

#submit_news.open {
transform:translateX(0);
-moz-transform:translateX(0);
-webkit-transform:translateX(0);
-ms-transform:translateX(0);

box-shadow:-3px 0px 5px rgba(0, 0, 0, 0.1);
} 

#submit_news .top{margin-bottom:20px;overflow:hidden;}

It seems to be a known bug in Firefox. Again Chrome and Safari work just fine, I can scroll the whole length of the form. But Firefox collapses the bottom padding of the div, and what I have left is a Submit button that can not be clicked because it's to low on the page. This is a sidebar that slides in and out of the screen (toggle effect, but not jQuery toggle*).