Position absolute `div` inside position relative parent `div` disappearing on chrome and edge

user_11128573 0
Viewed 622

I am trying to create a react component and position it on the page.

The component consists of multiple divs with position: absolute so that I can stack them on top of each other. The parent containing all these divs has position: relative and size 400px x 400px.

On firefox, everything works absolutely fine. However, on chrome or edge, the component renders but disappears off the viewport.

Edit:

Here is a jsfiddle of my code

When you access the jsfiddle using firefox, you can see concentric circles, when you access it using chrome, nothing shows up unless you disable position: absolute on the child components.

Research

From my research on this issue, this disappearing problem only occurs when the position: absolute children are unable to find a parent with position: relative, however this is not the problem for my implementation.

Trying using dev console on chrome, when I turn position: absolute off for all child components, the divs appear but no longer stack on top of each other.

Does anyone know why this is happening? How come it's only working on firefox, and is there any way to fix this so that the component can be viewed on all browsers?

Update

As per the accepted answer, the solution was to specify a width and height for the child divs containing SVGs. This is because for some reason some browsers do not automatically calculate width and height for SVGs. This is explained in the comments of this post, as well as in this post.

reactjs google-chrome css html
2 Answers

You need to give width to all circles as they become independent when you give them position: absolute. So modify your css code like this:

.child1, .child2, .child3 {
    position: absolute; /* Turn off to see circles in chrome*/
    top: 0;
    width: 100%;
}

Thanks me later.

user_97399380

you just missed the width and height for child div `

 .child1, .child2, .child3 {
    position: absolute;
    top: 0;
    width:100%;
    height: 100%;
   }
user_142413450
Related