Differences in qtwebengine rendering?

poVoq · 5 Oct 2020, 18:48

this is a screenshot from my OnePlus3. Notice the huge bottom bar and the overlap of the top. Neither happens with the exact same app on my Nexus5.

CiberSheep · 5 Oct 2020, 20:10

Could you narrow a bit your question?

What app are you talking about? Do you have a link to the code?
What bottom bar is the one having problems? The BottomEdge? A bottom bar you created? A website you use? All websites?

poVoq · 5 Oct 2020, 20:42

It is my own app that probably needs an update: https://github.com/poVoq/hubzilla-web

But the strange thing is that this same code on the latest dev on my Nexus5 works (and has always worked) fine.
I am talking about the rendering of the bottom edge, the same one as in Morph and many other apps.

Edit: from a quick look all qt apps that use the BottomEdge and qtwebengine seems to be effected?

CiberSheep · 5 Oct 2020, 21:06

@poVoq Thanks.
Probably is related to the scaling. Check if instead of the zoomFactor property in the webview, using https://github.com/costales/unav/blob/master/app.desktop#L7 --scaling makes this better or worse

AppLee · 5 Oct 2020, 21:07

@poVoq said in Differences in qtwebengine rendering?:

from a quick look all qt apps that use the BottomEdge and qtwebengine seems to be effected?

Please give examples of what you tried so we can reproduce and try to understand.
A wild guess would be that the app is not using "gu" to anchor their QML components.
Pixel density and screen size varying from a device to another this could explain how an app designed for the N5 is rendered poorly with the OP3.

From your screenshot, the qtwebengine component is not anchored properly and a higher anchor for the bottom edge might have this appearance.

CiberSheep · 5 Oct 2020, 21:13

@AppLee said in Differences in qtwebengine rendering?:

A wild guess would be that the app is not using "gu" to anchor their QML components.

Oh, that makes me think of something. Double density.

Here: before trying the desktop parameter, try instead of zoomFactor: units.gu(1) / 8

zoomFactor: units.gu(1) / units.dp(8)

poVoq · 5 Oct 2020, 21:35

@CiberSheep said in Differences in qtwebengine rendering?:

@AppLee said in Differences in qtwebengine rendering?:

A wild guess would be that the app is not using "gu" to anchor their QML components.

Oh, that makes me think of something. Double density.

Here: before trying the desktop parameter, try instead of zoomFactor: units.gu(1) / 8

zoomFactor: units.gu(1) / units.dp(8)

That makes the webpage think it is a desktop browser and not a mobile device and scales the page accordingly.
Edit: Tested this both on the Nexus5 and OnePlus3, no difference other that the webpage gets rendered on both devices in desktop scaling.

But thanks a lot for the help so far

poVoq · 5 Oct 2020, 21:40

@AppLee said in Differences in qtwebengine rendering?:

From your screenshot, the qtwebengine component is not anchored properly and a higher anchor for the bottom edge might have this appearance.

Yes that is what it looks like. But my question is what might cause this to happen only on the larger OnePlus3 screen and not the Nexus5?

poVoq · 5 Oct 2020, 22:05

@CiberSheep said in Differences in qtwebengine rendering?:

@poVoq Thanks.
Probably is related to the scaling. Check if instead of the zoomFactor property in the webview, using https://github.com/costales/unav/blob/master/app.desktop#L7 --scaling makes this better or worse

That makes the strange bottom edge a bit smaller, but once the keyboard comes up it increases to nearly 1/3 the screen on top of the keyboard. So definitely much worse.

Also on the Nexus 5 it has the strange effect that (while everything looks still nicely as before these changes) the keyboard inputs in the qtwebengine are not shown anymore and only appear in the forms after the keyboard is minimized. (edit: same effect also on OnePlus3)

poVoq · 5 Oct 2020, 22:20

What is also odd is that on the very first launch of the app on the Oneplus3 it doesn't get offset below the top bar. only after closing the app and relaunching it this starts to happen permanently.

cliffcoggin · 5 Oct 2020, 22:28

I can replicate this behaviour if I use Utweak to change the usage mode from Staged to Windowed, though the window can be stretched to full screen if I choose. Could you have done the same?

poVoq · 5 Oct 2020, 22:42

No, didn't even know how to do that until now. It is staged mode.

I tried increasing the overall scale in uttweektool now from 21 to 24 to see if that would make a difference, but the problem stays the same.

kugiigi · 6 Oct 2020, 03:56

I'm not sure if I understand the issue correctly
But first thing that came to mind is that the layout of the bottom edge I think is when there's a mouse detected?

poVoq · 6 Oct 2020, 09:33

Ah, good point. I noticed that sometimes on the OnePlus3 I shortly see a mouse pointer on the circle screen, so that might be a specific bug of the Staged mode in that model?

kugiigi · 6 Oct 2020, 11:07

@poVoq I've seen that issue in some ports so it's possible. How's the bottom edge in the messaging apps, clock, calendar, etc?

poVoq · 6 Oct 2020, 14:18

@kugiigi said in Differences in qtwebengine rendering?:

@poVoq I've seen that issue in some ports so it's possible. How's the bottom edge in the messaging apps, clock, calendar, etc?

Same in the sense that I get the bar with those core apps for clicking with the mouse pointer despite being in Staged mode, but they do not have the additional white border on top of it.

I tried switching around Stage mode with UT-Tweek-Tool, but no difference.

kugiigi · 7 Oct 2020, 02:25

@poVoq Looks like indeed a issue specific to that port. Bottom edge should just moistly be a tiny icon and not a full width bar. That's only when there's a mouse connected.