CODEWITHSUNDEEP
jquerycss
Agnes Cameron
Agnes Cameron

Reputation: 105

Mystery css bug with position:relative (just Chrome+Safari, not Firefox)

I'm getting really weird bug with position:relative in css, for a really simple problem. I'm trying to make a basic horizontal scrolling image gallery for a website. I've already done this for the mobile version, but for some reason the desktop equivalent isn't working.

Both the mobile and desktop sites use the following structure: a CSS grid that governs the page structure, a section of grid that acts as the gallery container, and then a horizontal scrolling grid, the "gallery" positioned relative to the gallery container.

In the desktop version, the width and height of the gallery are not getting defined relative to the parent div, and are instead the width and height of the whole document, and horizontal scrolling does not work. On mobile, width and height properties are successfully set relative to the parent, and horizontal scrolling works great.

The CSS for both the mobile and desktop sites is as follows:

mobile:

//grid
.textPage {
    display: grid;
    grid-template-columns: 20vw 50vw 20vw;
    grid-template-rows: 5vh 45vh 22vh 10vh;
    grid-auto-rows: 1fr;
    grid-gap: 1em 1em;
}
....

.galleryContainer {
    grid-area: 3 / 1 / 4 / 4;
    padding-left: 20px;
    padding-right: 20px;
}

.gallery {
    height: 100%;
    width: 100%;
    overflow-x: scroll;
    position: relative;
    display: inline-block;
    z-index: 10;
}

desktop:

//grid
.container {
    display: grid;
    grid-template-columns: 150px 150px minmax(300px, 1fr) 150px 150px;
    grid-template-rows: 80px minmax(300px, 1fr) 50px;
    grid-gap: 2em 2em;
    height: 100vh;
    margin: 0px !important;
}


....

.galleryContainer {
    grid-area: 2 / 1 / 3 / 6;
    padding-left: 20px;
    padding-right: 20px;
}

.gallery {
    height: 100%;
    width: 100%;
    overflow-x: scroll;
    position: relative;
    display: inline-block;
    z-index: 10;
}

Both sets of divs are placed using JQuery: I've checked that for both, $gallery is successfully placed within $galleryContainer.

    $galleryContainer =  $('<div/>', {
        class: 'galleryContainer',
    })
    .appendTo( '#mainContainer' );

    $gallery = $('<div/>', {
        class: 'gallery',
    })
    .appendTo( $galleryContainer );

The error can be re-produced using the following:

<html lang="en">

<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
</head>

<body>
<div id="mainContainer" class="container">
</div>

<script>
    $galleryContainer =  $('<div/>', {
        class: 'galleryContainer',
    })
    .appendTo( '#mainContainer' );

    $gallery = $('<div/>', {
        class: 'gallery',
    })
    .appendTo( $galleryContainer );
</script>

</body>

<style>
.container {
  display: grid;
  grid-template-columns: 150px 150px minmax(300px, 1fr) 150px 150px;
  grid-template-rows: 80px minmax(300px, 1fr) 50px;
  grid-gap: 2em 2em;
  height: 100vh;
  margin: 0px !important;
}

.galleryContainer {
  grid-area: 2 / 1 / 3 / 6;
  background-color: pink;
  padding-left: 20px;
  padding-right: 20px;
}

.gallery {
  height: 100%;
  width: 100%;
  overflow-x: scroll;
  position: relative;
  display: inline-block;
  z-index: 10;
  background-color: lightblue;
}

</style>

I also checked that no other css is overriding the divs on the desktop site. Attached is a screenshot of the desktop issue, with .galleryContainer set to background-color: pink, and .gallery set to background-color: blue. I get no error messages in the console, and all of the css properties are as expected when I look at the web inspector.

child overflowing parent

And here's a shot of the mobile, to show what I'm going for.

happiness and success

Thanks so much! I'm really stumped by this+any help appreciated.

Upvotes: 1

Views: 325

Answers (1)

Rob
Rob

Reputation: 15160

A doctype, or DTD (Document Type Definition), is required for all new web pages to tell browsers which browser mode to render your pages in. Without one, it is assumed to be in "quirks mode" which is like 1999 all over again and a place you do not want to be in as the box model used will be based on an error from long ago and will not be the same as current standard.

The box model is used to determine content width, margins and padding. This has changed since the 1990s and browsers, specifically IE, are now following the proper box model.

More detailed information here

Upvotes: 1

Related Questions