We currently recurse through the DOM tree using getBoundingClientRect() to determine the shape of the box that we want to take a screenshot of. This is working well, except when the topmost element has margin on it, since getBoundingClientRect() does not include margin. This means that you might miss some important details about the visual appearance of your component if you aren't being super careful.
I think we should use getComputedStyle() to determine the margin of the topmost element and use that in our rectangle dimension calculations. I want to avoid doing this for every node in the tree, since it is not the fastest method. I think doing this on the topmost element will likely get us 99% of the benefit, so it seems like an easy win.
We currently recurse through the DOM tree using
getBoundingClientRect()to determine the shape of the box that we want to take a screenshot of. This is working well, except when the topmost element has margin on it, sincegetBoundingClientRect()does not include margin. This means that you might miss some important details about the visual appearance of your component if you aren't being super careful.I think we should use
getComputedStyle()to determine the margin of the topmost element and use that in our rectangle dimension calculations. I want to avoid doing this for every node in the tree, since it is not the fastest method. I think doing this on the topmost element will likely get us 99% of the benefit, so it seems like an easy win.