Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
=> as you'll notice, the screenshots are going over the panels. But they should go below, ie, the panels should be on top.
Here is an example of a profile with screenshots: https://perfht.ml/2MKT5Hy.
This is where the z-index for the permalink is defined:
This is where the z-index for the screenshot hover is defined:
So it "looks like" that the stacking contexts are well defined.
But the permalink is actually inside the
I tried to manually remove this z-index with the devtools, and this seems to fix the issue. But this z-index has been added as part of the work on tooltips by @gregtatum, so I think that for tooltips it is actually intended that they'd go over the application's "chrome".
So the solution might be that we want to add the screenshots to a separate root element than the one for tooltips (
This is where we define which element the screenshots are added to:
I think this could be easily taken by a contributor, so I'm marking it like so. The MDN documentation about stacking contexts could be useful, as this bug is a direct application of it.
Thanks for asking @canaltinova! Been working on the netmonitor tools project and as that one is on Phabricator, this one completely slipped my mind. If anyone else is interested in working on it, please do assign it to them, otherwise, I can work on it this week. Thanks a ton!
Hi @julienw! I am sorry for the delay. I have read through this entirely.
So this is what I need to do:
So I think I can change the value of z-index in timelineTrackScreenshotHover css class in TrackScreenshots.css to 12? Would that be okay?
Also, what other root element can I use instead of "root-overlay"?
Thanks a lot. I am just getting started so the questions might be a little off the mark. I hope you don't mind.
Hey, sorry for the delay, as I was away for holidays! (and as was @canaltinova :) ).
You can use a new root element called
Also the best way to get started is actually write the code and see if this fixes the problem ;) Then you can ask feedback by pushing the code to a draft pull request so that we can have a look at some actual code.
I hope this is clearer! Please ask if you need anything more :)