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 Daniel Macleod
Daniel Macleod
6,040 Points

Chrome vs Firefox Window Resize Issue.

I have 4 sections, each with their own background cover image.
When I resize the window in Chrome, they are responsive and scale great as expected. 

<body>
<!--HOME SECTION-->
    <section id="home-section">
      <header class="main-header">
        <p>Title</p>
      </header>
    </section>

    <!-- ABOUT SECTION -->
    <section id="about-section">
      <p>Hello World!</p>
    </section>

    <!-- WORK SECTION -->
    <section id="work-section"></section>

    <!-- CONTACT SECTION -->
    <section id="contact-section">
      <video autoplay muted loop poster="../img/guysfield-bg.jpg">
        <source src="../img/starvideo-bg.webm" type="video/webm" >
        <source src="../img/starvideo-bg.mp4" type="video/mp4">
      </video>
    </section>
</body>

Here is the CSS:

#home-section,
#about-section,
#work-section,
#contact-section  {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background: url("img/image.jpg");
  background-position: center center;
  background-repeat:  no-repeat;
  background-attachment: fixed;
  background-size:  cover;
  background-color: black;
}

When I resize the window in Firefox or Safari, they are only responsive horizontally.
When I resize vertically, the ABOUT, WORK and CONTACT sections scroll over themselves.
It seems like the scroll bar stays still in Chrome and goes crazy in Firefox and Safari.

Any help is greatly appreciated.
Cheers.
Dan