Scrollview overflow in html5

[roughee]

@ianharrigan hi, I tried the examples from https://github.com/ianharrigan/haxeui/issues/201 and they work properly on flash target, but on html5 the items overflow the scroll. Each element gets a z-index of x+1 (i.e. button z-index:5, button text z-index:6, next button z-index:7)

Is there a way to fix this behavior? haxeui 1.7.14 openfl 3.1.3

[ianharrigan]

Hmmm, im not sure to be honest. I never thought about it being z-index!

[roughee]

I'm just telling what the css properties are of the buttons in html5 when I used

Toolkit.open(function(root:Root) {
    var view = new ScrollView();
    view.x = 10;
    view.y = 10;
    view.width = 350;
    view.height = 200;
    var grid:Grid = new Grid();
    grid.columns = 3;
    view.addChild(grid);
    root.addChild(view);

    var newButton = function(i:Int) {
        var button = new Button();
        button.text = 'Root 3 $i';
        return button;
    }

    for (i in 0...30) {
        grid.addChild(newButton(i));
    }
});

in flash it's fine, but in html5 target it will overflow it's original container.

Isn't this a bug?

[roughee]

@ianharrigan could you follow up on this one? is there a workaround? The buttons don't get rendered and then scroll view box boundries are totaly ignored by the grid children in html5.

Thank you.

[ianharrigan]

Ill take a look later today, however, as far as im aware, this is an issue with html5 target on legacy openfl scroll rects... Ill confirm that later but im fairly sure that last time i looked at it, this was the case. Even other frameworks that use html5 scrollrects suffer from similar problems, but they put the scroll rect as full screen (ie, take up all the stage) so you dont notice. Again, ill double check that later today.

[roughee]

ok, thank you

[roughee]

hmm it looks if I remove <haxedef name="dom" if="html5" /> from my project file that the scrollview works correctly, but all the text is blurry.

[ianharrigan]

Remove what from your project file?

[roughee]

If I remove the rendering property to use legacy Dom renderer - haxedef name="dom" if="html5" Then the scrollview renders fine, but all text is blurry.

[ianharrigan]

ahh, ok, im looking at it now, maybe the best thing is to use legacy for html5 too, bear with me, im looking at it too, see what options we have and what looks the best

[ianharrigan]

Ok, so there is an issue with DOM rendering, and i think this has always been there, however, in next you can use non dom rendering, which under the hood uses pixi.js... If you dont use any flags in your project.xml, then haxeui automatically uses this, ie, in the haxeui haxelib dir, there is a file include.xml that has:

<set name="openfl-legacy" unless="web"/>

Ie, if you dont override then html5 will use pixi. Now the reasont the text looks crappy is because pixi.js seems to automatically scale the whole stage to the size of the browser window. Im not quite sure how to turn this off (still looking), however, i know this seems to be the case as if you manually set turn off the width and height in inspector then the canvas becomes normal size again (see attached), the issue with this is that when you resize the browser again it jumps back to the scaled version, but its a start:

I have noticed another thing however, if you scroll the scroll view down to the bottom then you cant click on all the buttons, this im pretty sure is a haxeui issue, so looking at that now.

Let me know if any of that helps?

Cheers, Ian

[roughee]

Thank you, I will try to figure out how to fix the pixi scaling. Also, might consider to do the fullscreen scrollview if can't find pixi fix

[ianharrigan]

Im also taking a look at version 2 (which is a total rewrite) and see if similar problems exist there, if they dont, maybe something can be moved back. Ill let you know here how i get on.

[roughee]

It looks like pixi.js added scaling modes in 3.0.7 https://github.com/pixijs/pixi.js/commit/b0f8c931b0cd865b0649aad59d0fab00fce7a337

But I only found scaling for stage in openfl in _legacy\display\Stage.hx set_scaleMode() There is also smoothing in _legacy\display\Bitmap.hx (doesn't help)

[ianharrigan]

Doesnt that commit show that by default pixi is performing linear scaling? Also, on v2 there is the same problem about clicking on buttons in a scrollview, it is related to where the scrollview is located. If you put a scroll view on 100x100 then you cant click on the last 100px of buttons, put it on 10x10 and you cant click the last 10px, put it on 300x300 and you cant click any. :(

[roughee]

Yes, it does, but if openfl had the options it would be possible to change PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST instead of linear.

I tried https://github.com/ianharrigan/haxeui-webview (searching for alternative), it loads in flash, but in html5 it stops loading without a console error.