Graphical glitch with clear logo's after update to 6.7

[AeronNL]

He guys, I updated to 6.7 yesterday, and now i have a graphical glitch with the clear logo's. The "border" of the image is kind of showing. Please see the attached screenshots.

[spycat]

I'm having the same issue. I was actually seeing it in the betas as well. When I start BigBox all looks fine. The problem appears after scrolling the platforms. Attached image 1 is at BigBox startup. Attached images 2 and 3 are after scrolling through the platforms.

[AeronNL]

spycat said I'm having the same issue. I was actually seeing it in the betas as well. When I start BigBox all looks fine. The problem appears after scrolling the platforms. Attached image 1 is at BigBox startup. Attached images 2 and 3 are after scrolling through the platforms.

Exactly, after scrolling here as well!

[spycat]

It very well may be that this issue is not too obvious when variegated (fanart, screenshot etc.) or moving (video) backgrounds are used, but it stands out against a non-white, reasonably uniform background and the darker the background the more noticeable it becomes. It's not a huge issue but it's very unsightly.

[Jason Carr]

Thanks guys, I am aware of this issue. It seems to be more common with PNGs that bleed right up to the edge of the image, but it's not isolated to those types of images. It seems to be completely random as well. I put some effort into fixing it recently but discovered that it's a .NET rendering engine issue, so it's proving difficult to fix. We will get it fixed though. :)

[AeronNL]

Jason Carr said Thanks guys, I am aware of this issue. It seems to be more common with PNGs that bleed right up to the edge of the image, but it's not isolated to those types of images. It seems to be completely random as well. I put some effort into fixing it recently but discovered that it's a .NET rendering engine issue, so it's proving difficult to fix. We will get it fixed though. :)

Good to hear Jason, and thanks for explaining. Glad that we dont have to delete everything and start from scratch or something!:)

[Nielk1]

Theoretically this is ghost borders caused by anti-aliasing when scaling.

This page describes a solution that involves tricking the scaler's anti-aliaser using flipped tiling and drawing the image scaled into a waiting canvas: https://blog.mariusschulz.com/2014/05/28/preventing-ghost-borders-when-resizing-images-with-system-drawing

The important code fragment if the site goes down:

using (var graphics = Graphics.FromImage(resizedImage))

{

    graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;



    var attributes = new ImageAttributes();

    attributes.SetWrapMode(WrapMode.TileFlipXY);



    var destination = new Rectangle(0, 0, targetWidth, targetHeight);

    graphics.DrawImage(image, destination, 0, 0, image.Width, image.Height, 

        GraphicsUnit.Pixel, attributes);

}

 

[Jason Carr]

Thank you @Nielk1, I will review and see if that code can help. We're in WPF and we're relying on WPF to do the painting (as we should) so I'm not sure if I can hook into that or not. That code is mainly for Windows Forms. That said, I'm also not sure if it's happening in the image resizing or the actual rendering of the images on the screen. But it would be amazing if that fixed it; I'll take a look at it tomorrow, possibly in the development live stream.

[Jason Carr]

Killer. Thanks @Nielk1, really appreciate the help. It's hard to know 100% for sure, but it does look like this did resolve the issue. I really appreciate it. I'll have the fix out in the next beta.

[Britxcdn]

@Jason Carr was this fix rolled out into any of the betas? I am running 6.9 beta 13 and still seeing the edges around the logos. 

 

Thanks for your help

[Jason Carr]

Sadly we thought this had fixed the issue, but my original suspicions ended up being correct. The issue is not fixed, no. The issue isn't with the resizing but instead with the actual WPF rendering of the images, which makes it very difficult to resolve. It's still on my plate.

[Nielk1]

It's funny, at first I thought it was resolved looking through my wheel but I recently saw one.  Placebo effect?  Perhaps adding a 1 pixel transparent border to the images would work?

[Jason Carr]

Sadly I already tried that @Nielk1. Believe it or not, not even that fixed it. Pulling my hair out here.

[Nielk1]

It's odd, you'd think triggering it to draw the image as tiled+flipping would solve any sort of issues since there's no missing data to extrapolate a border from.  I guess you'd need to inject that logic into the actual draw logic which is abstracted away from you at that level.

My only idea now is to check the DPI of the PNGs to make sure they are 96dpi.

My experience is with WinForms and ASP.net so sadly my experience in this area is a bit tangential.

It seems like you need to somehow inform the renderer of data outside the image render area (hence the above tiling hack) at the time of the rendering.  Like if you added that transparent border but then somehow cropped it out while the actual render logic still knew about it.

[Jason Carr]

Yeah, agreed. That makes sense. Somehow I need tap into that rendering engine but as of yet I haven't found the way. I haven't checked the DPI of the images, but it seems so random that I doubt that would be the cause. Let me know if you're seeing otherwise.

[Jason Carr]

This thread does seem to have a few clues: http://stackoverflow.com/questions/592017/my-images-are-blurry-why-isnt-wpfs-snapstodevicepixels-working

I'll give that stuff a shot here soon.

[Nielk1]

I've personally not seen anything with DPI, I just bring it up since it's a known WPF issue.  It causes unusual scaling but not ghost borders.  I am thinking I might run my entire image library though a png optimizer just for sanity's sake and for size reduction.

[Britxcdn]

Thanks for the update guys, appreciate your time on it!

[Kishio]

I made a thread about this but deleted once I saw this. Yup same problem

I could imagine how annoying it would be to fix, keep up the good work !!!!

 

[Jason Carr]

Yeah, this is currently driving me absolutely insane because it's happening more prominently now on my new bartop arcade as well. So this is high priority to fix. I already spent a good few hours on it yesterday though and got absolutely nowhere. It seems like it does have something to do with different video cards and video drivers. What are you running for your video card @Kishio?

At this point I have a feeling that this is not WPF's fault and is being caused by the FlowControl/CoverFlow code itself. However, the rendering code is extremely complicated so I'm having trouble narrowing it down. I hope I'm on the right path.