Starling DisplayObject mask bug with browser page zoom != 100%

Hi!

I found strange things with masks.

var mcScrollView - is empty Sprite from GUI constructor (see on picture)

var visibleRect = new Rectangle(0, 0, 530, 350);
var mcContainer = new Sprite();

mcScrollView.addChild(mcContainer); 

var quad:Quad = new Quad(visibleRect.width, visibleRect.height, 0x808080);
quad.x = visibleRect.x;
quad.y = visibleRect.y;
mcScrollView.mask = quad;
// _mcScrollView.addChildAt(quad, 0); // to test size and position of Quad

mcContainer.addChild(new FaqSlot());
mcContainer.addChild(new FaqSlot());
mcContainer.addChild(new FaqSlot());
...
code to implement scrolling content (where I change _mcContainer.y)
...

It works fine if 100% browser zoom:
image

150% browser zoom:

50% browser zoom:

If I add same Quad as simple child (not as mask) - it’s size and position are ok with different browser zoom:

You need to know, that I update Starling viewport size and position and Starling stageWidth|stageHeight every EVENT_RESIZE to cover all available browser space.
But I don’t think it matters because we work in logical Starling coordinate system.

Any ideas?)

Not 100% solution but probably it works:
You need add mask to Starling.current.stage and multiply its x,y,width,height to Starling.current.nativeStage.contentsScaleFactor.

var browserZoom = Starling.current.nativeStage.contentsScaleFactor;
var quad:Quad = new Quad(mask.width, mask.height, 0x808080);
quad.x = mask.x;
quad.y = mask.y;
_mcScrollView.addChild(quad);

var p = _mcScrollView.localToGlobal(new Point(quad.x, quad.y));
quad.x = p.x * browserZoom;
quad.y = p.y * browserZoom;
quad.width *= browserZoom;
quad.height *= browserZoom;
Starling.current.stage.addChild(quad);

_mcScrollView.mask = quad;

Seems it is bug. I open issue - Starling DisplayObject mask bug with browser page zoom != 100% · Issue #170 · openfl/starling · GitHub

1 Like

Hi, sorry I wanted to look into this but did not (yet)
Out of curiosity, did you try putting <window allow-high-dpi="true"/> in your project.xml and starling.supportHighResolutions = true; in your code ?

Hi!

Yes!

Also I try both variants for starling.supportBrowserZoom = true|false; but seems it does not matter for html5 target

Thanks!

Ok thanks for the details ! Every bit helps :wink:

This problem has gone if use Quad inside Sprite (not directly as mask).
Thx all!

1 Like