While I was developing a video overlay extension I noticed that my background color was bleeding out and after some investigation I managed to pin point why exactly is this happening. Turns out its not from my code (phew) but rather from twitch CSS applied to all overlay extension.
As you can see the transform on the <div that wraps all extensions is causing the browser to split the pixel in some cases which causes the bleeding. Also I noticed rendering issues when I switch content in my extension which again is related to those styles, when I removed them all is good.
So the question here is why this transformation is applied in the first place, maybe there is a good reason for it but I can’t think of one.
That bit of CSS is for vertically centering the element
div.extension-overlays within its container. Without more careful scrutiny of the surrounding styles, I can’t say what the purpose is.
Mind clarifying exactly what behavior you’re seeing, in terms of the CSS you’ve written, when you say “my background color was bleeding out”? There ought to be some way to markup and style your Extension to avoid conflicting with the styles provided by Twitch.
I don’t think its for vertical centering since the child div has fixed width and height which expands the parent. Removing the styles in question(top, left, transform) from the element does not change anything regarding its position and dimensions, that’s why it’s confusing to me why they are applied in the first place.
To clarify about the background, in my test case I have a div with width and height of 100% with a solid background color. The CSS translate from the parent div.extension-overlays causes 1px from the top and left of my div to be semi transparent which is probably a rendering bug from Chrome (not sure). This is not a big issue to consider but to apply CSS transformation to a heavy DOM structure is pretty demanding task for the browser and maybe that’s why I see strange rendering issues.