SVG and HTML stacking on top of each other

I have this problem only in chrome based browsers.

As you can see, firefox reads it like a layer and stack them but chrome doesn’t do that.

Is there a way for chrome to behave like firefox?

Here’s the code if you need it.

This is probably the wrong way to do it but you can try adding this css.

.carousel img{z-index:-1;position:relative;}

I’m guessing that svg probably has its own way of defining stacking contexts but I am unfamiliar with the ins and outs of svgs.

It doesn’t work. What is the purpose of the backface-visibility in carousel? I just noticed it.

It works locally for me in Chrome and Firefox with the code mentioned above but I notice when I upload it to codepen it stops working.

The codepen works if I remove the backface-visibility/

e.g.

.carousel-item {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

I assume backface -visibility combined with perspective is being used to allow smoother animation and stop flickering by allowing the 3d rendering engine to take over. The problem is that it creates a new stacking context.

Try removing it and see if it is usable for you.

If that doesn’t work then would it not be better to make the person on the right a separate svg and then you’d be able to place it on top as required using z-index and positioning?

1 Like

The codepen works if I remove the backface-visibility

Yes. I also did that by changing visible backface-visibility to unset. But whenever the carousel moves, it goes back to its default value for a second.

Here’s the fiddle.

Yes it seems that while its transforming the element creates a stacking context that overlays the svg.

As I said above I know pretty much nothing about svg but from looking at the docs this morning it seems that z-index is not applied to the elements that lie within an svg but they are rendered in order of the code apart from elements like foreignobject that create a new stacking context.

Therefore it would seem that my previous reply would be the best way to go about this and remove the teacher from the first svg and overlay it in an svg of its own which can be controlled with stacking contexts in the normal css way. (This also avoid messing with the transform/backface rules on the carousel and it will behave properly.)

I know nothing about setting an svg up so I merely pulled the relevant code into its own svg and overlayed it over the first one.


(Note I just threw everything into the left panel of codepen to make an easy copy and paste.)

That appears to work for me in Edge, Chrome and Firefox (note that it does not work in IE11 (neither does your original) as i don’t believe foreignobject works properly in IE11).

I believe you need to clean up those svgs as I don’t think all that extra code is necessary but that would be a job for you to research.:wink:

I also don’t like the fact that the carousel is embedded inside an svg and I would have simply overlaid several svgs around the normal html carousel and then you would at least have the carousel working in IE11.

Hope the above is of some use to you :slight_smile:

1 Like

Oh, thank you!

Oh, yes. I just found an article about that. I’ll take a look on it.
I was about to change the bs carousel to any alternatives to test if it would work.

I had an idea of separating the important parts and just stack them but I kinda messed up with the positioning of each part, so I stopped; I’ll probably go back though.

1 Like

Here’s it is. But, what if they are enclosed in a bootstrap .container? It doesn’t work since absolute positioning breaks the DOM flow.

The absolute elements are placed on top of the element that is in the flow so the natural flow of the document is maintained.

You do need a custom parent container as in my example that has position:relative set along with display: table so that the container hugs the content and allows the absolutely placed elements to sit properly. You may also want to add margin:auto to that custom container to centre it.

1 Like

Ohh, I see. Thanks for helping!

1 Like

Something like this would do:

.mycontainer{
	display:table;
	width:auto;
	margin:auto;
	position:relative;
}

EDIT

Actually I see you have this as a fixed width and if you want it to be responsive you will need a change of tact and make the svg 100% width and change the container structure to something like this.

Open and close the window to see the difference between this and your example.

Ok, I just tested on Safari and IOS and they don’t like the carousel inside the svg and both browsers are broken. Therefore I suggest that you remove the carousel from the svg and place it in its own stacking context outside of the svg as I mentioned in a previous post.

I’ve forked your code again and here is a full working and responsive version that renders in Firefox, Chrome, Edge, Safari and mobile ios (iphone).

It still won’t work in IE11 as the svgs don’t scale properly but there probably is a way if IE11 needs to be supported.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.