Scrolling performance in Files is really bad on iOS

[oparoz]

8.2 8.1? introduced a severe performance regression on mobile. I'm not sure exactly which change has created the problem, perhaps the sidebar, but if you scroll through files on mobile, it's very ugly.
There has been an attempt to fix the situation, but it broke things even more on other platforms.

The problem has been solved in Gallery and you can compare scrolling performance by switching between the 2 views to understand the problem.
A similar fix could be applied to files, but it involves modifying the structure of the templates in order to take the fixed controls bar outside of the scrolling div and may not be the best solution for all apps.

Diagnostics

8.2

Files/logged-in: slow
Files/public: slow
Gallery/logged-in: was slow, had to change the structure
Gallery/public: was slow

8.1

Files/logged-in: slow. Has controls, navigation panel
Files/public: smooth. Has controls
Gallery/logged-in: slow. Has controls
Gallery/public: slow. Has controls

@jancborchardt @Henni @PVince81 @MorrisJobke @rullzer

[PVince81]

Would be good to bisect that to find out the cause.

[oparoz]

I've had a look at the template and it hasn't changed for 8.2, so it must come from the CSS and it has to be fixed app by app as controls is not in the base template.

[jancborchardt]

So you’re saying the fixed controls bar could be a cause? Does it work fine in the Mail app and others which don’t have that bar?

[oparoz]

It's more about the choice of scrollable element.
On 8.1, on the public page, scrolling is smooth, but the structure is different. the scrollable element is outside the app, including the header. The fixed elements are on top of the scrollable element or that scrollable element is maybe not directly above the fixed element? I'm not sure because I can't find which element is scrolling.

On 8.2, you have the new structure (aligned with the logged-in side), which is better visually, but which kills acceleration, because the fixed elements are inside the scrollable element.

If you move controls outside of the content, then you get to keep the scrollbar "inside", but you have to rewrite some CSS to make it work with the navigation panel and maybe the sidebar.

[oparoz]

So,

<scrollable>
    <fixed></fixed>
    <content></content>
</scrollable>

BAD

but

<fixed></fixed>
<scrollable>
    <content></content>
</scrollable>

GOOD

[oparoz]

So any fixed element inside #app-content is going crazy if -webkit-overflow-scrolling: touch is used. That was the reason the fix mentioned in the OP had to be reverted. So if you ever want mobile performance back, fixed elements such as #controls or #app-sidebar have to be moved outside or the scrolling action has to be moved to a sibling. In the example above that means making #content scrollable and turning #scrollable into a container.

[ghost]

@rperezb can you have someone in mobile have a look?

[PVince81]

The problem here is that we already changed the container structure and changing it again, especially in a backport, is likely to cause more regressions. I'd rather move this to 9.1 which is another opportunity to reconsider the container layouts.

Moving to 9.1 CC @cmonteroluque

[oparoz]

Approved

[ghost]

I agree. CC @MTRichards as a heads up

[MTRichards]

As long as we actually cover it, sounds like a plan for 9.1.

[PVince81]

@MTRichards @cmonteroluque to clarify, this is about the web UI on mobile, not mobile apps.

[MTRichards]

Yes, understood. thx.

[ghost]

right

[skjnldsv]

I worked on a pr on the mail app this week and did exactly the same stuff.
Using fixed div are ok but only out of the page flow, like @oparoz said.

Currently we have a sidebar with the settings button fixed on the bottom.
I think we should change this structure, and put the scroll on the ul part.

<div id="app-navigation">
    <fixed-top element></fixed-top element> 
    <ul>this is the list we usually have</ul>         <--- scroll
    <fixed-bottom element></fixed-bottom element>
</div>

To do that we can also drop the float left of the #app-navigation to replace it with some beautiful display:flex. And for the scoll part of the ul, we should use the css function calc which work perfectly: height: calc(100% - fixedelementheight)

Refs: owncloud-archive/mail#1476

[ownclouders]

Hey, this issue has been closed because the label status/STALE is set and there were no updates for 7 days. Feel free to reopen this issue if you deem it appropriate.

(This is an automated comment from GitMate.io.)

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.