MS Edge extra strong Antialias

[Leodim]

Hello,

We are using pixi v4 (through haxe), and we have some very very strong antialias on ms edge browser. In fact it's so strong it might look better without :/ We used antialias = true.

Here is a screenshot showing chrome (on left) and edge (on right), as you can see, image gets really blurry. The png in the sprite sheets have better resolution than what I display in the pic, that is not the cause. Game is simply scaled down.

I have no idea what causes this or how to workaround/solve the issue. Any hint is welcome.

 

 

 

[ivan.popelyshev]

Antialiasing works on edges, but this is the filter or something like it. Sorry, its not enough info to determine what's wrong in that case. Can you give a demo in zip file or something?

[Leodim]

I was talking about the browser "microsoft Edge" (on win10 in the pic), the new IE. Compared to chrome on left. There isnt something related with edges, its just a big png (scaled down) you are seeing in the pic. There is no filter applied, except antialias is true on renderer.

Or am I understanding your answer wrong ?

EDIT : I will provide some sample tomorrow because I can't show it as is, for classic NDA reasons.

EDIT 2 : btw it's clean (= same result as Chrome) in Firefox, IE, Android Chrome, Android native browser, and iOS Safari on iPhone 4S and iPad3 (forgot iOS version). I've only seen it so blurry with ms edge.

[ivan.popelyshev]

"Antialias" works on edges of image.

[Leodim]

Ha that's what you were meaning  In fact I'm not sure what's the cause here (antialias issue was just my best bet).

Will update this tomorrow (I'm home atm) with some sample code and will do some tests trying to isolate issue.

[Leodim]

Ho maaaaan Im' ashamed!! I found the reason, browser was zoomed in  I never use edge, and suddenly the possibility just poped up in my head.

works fine I'm out hiding for the rest of the century.

EDIT : since we resize the game to the browser's window size, the size wasnt actually changing when "zooming", all that was happening is the game getting blurrer with zoom increase. I don't know if this should be considered a bug, anyway nothing to do with pixi I think.

[ivan.popelyshev]

Do you call "renderer.resize(w,h)" or its just css width 100%?

[Leodim]

If I remember correctly, I just scale the main Container of the game so that it fits.

So my bet is :

- When zooming edge, window.innersize.width/height decrease.

- So I zoom the scale of my container acordingly (decreasing)

- Then browser render it zoomed and thus it still fits screen. But it's, for instance, a 0.5 scaled container zoomed x2 by browser. Hence the blur.

 

[ivan.popelyshev]

ah zoom! its in "window.devicePixelRatio", you can resize(w * pixelRatio, h * pixelRatio) and it'll be fine.

[Leodim]

1) Is there a way to know browser's zoom level, so I can take it into account and let the user actually zoom inside the game ? I'll look into that tomorrow.

I see no reason why this would help said user but I also see no reason why he should get a blurry game instead of zooming if he really wants to.

2) Or better : a way to prevent browser from zooming on this page since result is not what's expected anyway, and also game is not designed to be played zoomed.

EDIT : You just answered 1) while I was typing  

[mattstyles]

2) nope, deffo can not prevent it, its a browser feature that is critical for accessibility etc.

You could try detecting it with devicePixelRatio and displaying a message to the effect of 'dont zoom in, things might get funky', but, gleaning zoom level from devicePixelRatio sounds hacky as all hell as I don't think you have any method for finding out the 'native' pixel ratio of the device using your site.