I’m creating an extension to overlay on a page and create a see-through layer to expose only certain elements on the page. Something similar to the one here – https://codepen.io/pixelass/pen/zGVWjN
First for the overlay, I created a div (“overlay”) with position: fixed, background: transparent and pointer-events: none and z-index: 9999 so that this is the top most layer. I then created another div (“shadow”) which uses box-shadow for see-through with top & left based on the target element’s getBoundingClientRect()
.
I’m having an issue where “shadow” div doesn’t respect top and left positioning on some websites. I needed to add margin-top and margin-left for some of them. Why is that?