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();
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
code to implement scrolling content (where I change _mcContainer.y)
It works fine if 100% browser zoom:
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.
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;
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;
_mcScrollView.mask = quad;
Seems it is bug. I open issue - Starling DisplayObject mask bug with browser page zoom != 100% · Issue #170 · openfl/starling · GitHub
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 ?
Also I try both variants for starling.supportBrowserZoom = true|false; but seems it does not matter for html5 target
Ok thanks for the details ! Every bit helps
This problem has gone if use Quad inside Sprite (not directly as mask).