1px bug based on window size

Having some trouble debugging this…
I keep getting this 1px edge that pops out depending on the resolution of my html5 extension window.

Attached is an example:

Some times that border isn’t there:

I’m not exactly sure what’s causing it, I had a suspicion that it was an issue with how I implement widths/heights (I’m using %s), but it seems to affect the whole iframe. I’m guessing at certain aspect ratios, the iframe bugs out. Is this just a bug I have to live with? Seems consistent across other browsers.

Changing the margins fixes/hides it, but obviously I can’t affect iframe from the extension…

@Dustin_Wang I have a suspicion that is related to this -> CSS transform on overlay extensions causes issues
TLDR; Inspect the <div wrappers that holds the extension iframe and check if any of them have CSS transform applied, then try to disable it from the developer tools to see if it fixes the problem.

@Born2Phil Thanks! Definitely something related to using css transforms.
Though I’m curious why transform properties on the child, somehow affect the parent div/iframe…

A cursory google search shows that %s transforms are probably the culprit. I’m guessing a ton of fractional values are bugging out…

I’d like to continue using transforms (I use them for animations), I guess I’ll have to step away from edge touching extensions until I can figure out a fix.

@Dustin_Wang Transformations on child elements does not affect the parent it’s the other way around.
You are exactly right that %s transforms could result in element dimensions with a fraction or so called half pixel which the browser display as semi-transparent.
The problem is not from your code It’s coming from the 50% translation that Twitch applies to the wrapper of the iframe which holds your code and therefore propagates and creates dimensions with a fraction. At the moment nobody has come to explain why this 50% translation is applied in the first place. It’s a minor visual bug and my guess is that twitch devs have more important work to do but hopefully they will address this problem at some point.

@Born2Phil I see. I had thought that it shifted the whole iframe.
I assume twitch added the 50% to center the whole iframe (since that’s how you typically center things within a div).

Possible workaround I can think of is detecting a fractional dimension case, and round up. Not ideal, but I think it’ll work.

Yeah it could be for positioning but the iframe has 100% width and height so to me it doesn’t make much sense to be the case, also there are other ways for positioning not involving transformation.