Differences in qtwebengine rendering?

poVoq

I noticed that while on my Nexus5 things like the pull up bottom bar render very nicely with overlay shadow and all this, quite the opposite is true on the OnePlus3 where I get an ugly permanent large button bar at the bottom (taking up maybe 10% of the screen), and sometimes also the webpage ends up rendering below the topbar. To some extend this also effect the Morph browser, where I get a big bottom bar instead of the small pull up nub of the Nexus5

As this also effects my own app (uHubzilla a qt app utilizing qtwebengine) I am wondering how and where this is configured. I assumed these things would be the same accross devices, but apparently that isn't the case?

Anyone else come across this and has an suggestion to make it at least behave like Morph with a smaller bottom bar?

poVoq

https://imgur.com/a/VyxBEbO

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

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

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

@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

@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

@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

@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

@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

@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

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

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

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

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

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

@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

@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

@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.