Still can't scroll on iOS 11.3.1 (iPhone 6) when accordion is open

[goodfellasthai]

Hi Guys,

I am opening this issue in relation to issue 2197 which is now closed so I can't add to it

Hi, I wonder if you can help, I am still seeing this, I have pulled the latest version of f7 js and css from github. I am using the latest version of iOS 11.3.1 on an iPhone 6. This is exactly the same behaviour explained I am seeing in this case and the bug. I have checked framework7.js and it has the code fix above mentioned but still the issue persists.

I have uploaded a screenshot attempting to scroll the accordion, unfortunately I cant really provide much else as this works fine when I view through the browser or on Android.

https://drive.google.com/file/d/1kMVEzWDgrq9xWUXBOKna1j-w9bDsertu/view?usp=sharing

Any help would be much appreciated

UPDATE: I have another video showing the behaviour there are a couple of things, only when scrolling on iOS does the content of the other accordion seem to flicker, the button hidden in the other accordion flckers briefly on the screen, I do actually use hidden divs inside the accordion with tables that are unhidden with buttons, I am going to try today to remove the hidden divs to see if that has any effect. The new video also shows behaviour that other people reported i.e. the screen does not scroll and then after a couple of attempts completely disappears.

One other thing is when I open up the hidden div and close it again it then seems to enable the ability to scroll for some reason.

Many thanks again guys

https://drive.google.com/file/d/1TloXzo0762H2Uolx8F1oD7pgZu20Fn47/view?usp=sharing

[goodfellasthai]

another quick update, I have tried various things like not using hidden div's in the accorion-item-content, I have also enclosed the inner part of accorion-item-content in a div with a block class.

[contfedorov]

Have the same issue. My layout is much more simple: accordion list with ordinary list as a content of each accordion item.

<script id="pageTemplate" type="text/template7">

            <div class="list accordion-list">
                <ul>
                    {{#each this}}
                    <li class="accordion-item">
                        <a href="#" class="item-link item-content accordion-item-toggle">
                            <div class="item-inner">
                                <div class="item-title">{{source}}</div>
                                <div class="item-after" style="color: #444444;">{{value}}</div>
                            </div>
                        </a>
                        <div class="accordion-item-content">
                            <div class="list">
                                <ul>
                                    {{#each variables}}
                                    <li>
                                        <div class="item-content">
                                            <div class="item-inner">
                                                <div class="item-title">{{this}}</div>
                                            </div>
                                        </div>
                                    </li>
                                    {{/each}}
                                </ul>
                            </div>
                        </div>
                    </li>
                    {{/each}}
                </ul>
            </div>

        </script>

I insert the code generated by this template into page-content directly.

There are 3 problems with its behaviour:

1. Flickering when I close accordion items
2. Scroll freezing
3. (The most disgusting). Content disappearing when scroll

Note Content disappearing takes place if I use "view-in-popup" layout (F7 popup with F7 view as content, described here. View content is generated by the code above.) If I open page via router, there is no such behaviour. At least, I wasn't able to catch it. Flickering and scroll freezing take place in both scenarios.

I use Framework7 v2.0.8 in Cordova, iPhone 6 Plus with iOS 11.3.1.

[goodfellasthai]

another update - I have tried the same on an iPhone 7 and it works fine. Also no issues on various Android devices.

[contfedorov]

@goodfellasthai Do you use UIWebView or WKWebView in your Cordova app?

[goodfellasthai]

I am using Phonegap and PhoneGap build for the apps, but checking the build logs there are a lot of entries for UIWebView and none for WKWebView so I am assuming it is being build with UIWebView.

[stargurl16]

In my case opening the accordion added "overflow: hidden" to the class ".page-content" for some weird reason.... So I added this to my app css file: .page-content{ overflow-y: scroll !important; } and the issue with not being able to scroll was fixed for me.

[goodfellasthai]

Hi Stargurl still no joy for me with that overflow setting in my app .css, just to add another issue to this it may be related or it may not and I have seen people having similar issues in this issue forum. When clicking on the accordion item title the accordion appears quickly then disappears as though you have pressed it twice. If you click it super-fast it works. A lot of these issues seem to be linked I think, and some specific to the iPhone 6, I have tried a few source code mods but no joy :(

[goodfellasthai]

Guys,

Just as an update I had hunted round many forums for a couple of months for the solution to this, it seems as though it is not an issue with F7 but more a specific issue to how iOS in particular deals with overflow situations (I also found people having similar issues using ionic which is where I got some of the solution from). I also found this error only seems to happen in F7 when using tabs and not on standard screens.

I added the below css lines to cover all the situations I was experiencing, one weird thing until adding the 'touch' css to the specific css areas iOS would would still work with double finger scrolling but not single finger scrolling.

After adding the below css to my app css file I had no issues with scrolling or disappearing screens on iOS, some of my colleagues also reported similar issues with my app during Android testing.

If I find any other details I will update this thread.

@stargurl16 thank you for your initial input that put me on the right track.

Regards

Paul

CSS

.page-content{ overflow: auto !important; -webkit-overflow-scrolling: touch !important; } .tab { overflow:auto; -webkit-overflow-scrolling:touch; } .tab .content-block { overflow:auto; -webkit-overflow-scrolling: touch;} .tab .page-content { overflow:auto; -webkit-overflow-scrolling: touch;} .accordion-item-content {-webkit-transform: none; transform: none; overflow:auto; -webkit-overflow-scrolling: touch;}

[contfedorov]

Moved to F7 v3.1.0, results are the following:

1. Flickering on close accordion items still presents
2. No scroll freezing at all
3. No content disappearing

Device is the same, iPhone 6 Plus with iOS 11.3.1; Cordova-based app.

Thanks for fixing.

[goodfellasthai]

Hi @contfedorov yes I upgraded F7 to 3.1.0 also to see if that would resolve it but only the css changes did.

I am still experiencing the same as you with the flickering though - if I find any info on that I will update this thread again.

[goodfellasthai]

Hi Guys,

Scrolling is sorted but having a problem with content in the accordion disappearing now.

@Dev guys if I registered for support on one of the contribution pages could this be looked at as a priority for me? I have some tight project deadlines and would happily contribute to the F7 project for an elevated level of support for this issue.

Regards

Paul

[nolimits4web]

@goodfellasthai can you please setup a minimal JSFiddle where I can reproduce this issue? And I will take a look somewhere in the beginning of next week

[goodfellasthai]

@nolimits4web - many thanks for your response it is much appreciated and I am going set up a recurring donation on your patreon page today I think you have developed an outstanding product with Framework 7.

The problem with setting up a JSFiddle is I can't replicate the issue on a web browser or even Android, the issue only occurs on iOS with Accordion content, I have uploaded a couple of videos previously of when the page could not scroll, then I added the above css and this fixed my scrolling issue, I suspect it was the touch part of the css that fixed that - however when I added that css the accordion item content disappears from the screen when scrolling now. I will do another video of that issue happening.

My accordion item content is fairly complex in the sense it has buttons that then display/hide other div sections in the same accordion item so I am not sure if this might be having some impact on the reason for this. Also I am experiencing the same issue as @contfedorov with the accordion items flickering when selecting.

Your support is much appreciated.

Kind Regards

Paul

[nolimits4web]

@goodfellasthai thanks! Problem with video is that it is hard to reproduce it. Is this issue replicated in iOS Safari? Or only Cordova app? Maybe you can then setup minimal reproduction repo on GitHub. It can be some minimal Cordova app if it is cordova-only issue so need to check it live to be able to fix it

[goodfellasthai]

@nolimits4web I think I have resolved this now using css it also seems to have resolved the accordion flickering issue, using the same css as above use webkit-overflow-scrolling: auto instead of touch @contfedorov maybe you could give it a go see if it works for you.

[goodfellasthai]

@nolimits4web and @contfedorov the screen disappearing issue seems resolved but the scrolling of the accordion now seems to lag a little, @nolimits4web one of my colleagues will be setting up a recurring payment to your project in the next few days under the username cloudhays@gmail.com.

Regards

Paul

[nolimits4web]

Guys, still need a some minimal reproduction repo. Would be extremely helpful if some of you can set it up

[goodfellasthai]

@contfedorov do you have the ability to do a reproduction, my main problem is all my content is generated from web services and I don't have the ability to do that externally. If not I could try and mock something together that replicates (if it does on Safari) also I only use an iMac to upload my generated ipa files and not for the actual development process.

Regards

Paul

[contfedorov]

@goodfellasthai Yes, I will do it.

[mbplautz]

@goodfellasthai thank you for your solution, because dropping those lines into my CSS is all it took to fix the problem.

@nolimits4web if you have access to iOS Safari then I can publish something to the web that will recreate the error, unless @contfedorov gets to it first. Let me know if this is what you are looking for to reproduce the issue.

[nolimits4web]

@mbplautz

I can publish something to the web that will recreate the error

That will be good, but i will be able to check it on iOS 12

[mbplautz]

@nolimits4web please check

https://mbplautz.github.io/app/index.html

I was able to reproduce the issue on my iPhone on iOS 10.

[contfedorov]

@nolimits4web Sorry for being late. Unfortunately, I can't reproduce flickering and content disappearing now. Even via F7 v2.0.8.

Scroll freezing is reproducible, but for v2.0.8 only (v3.1.0 works fine). Please take a look if needed: https://github.com/contfedorov/f7-issues/tree/accordion_content_issue

[goodfellasthai]

I think I figured out why it was happening for me.

It was to do with the pull to refresh, after dynamically creating all my accordion content I issues my app.ptr.done() this is when there was a problem - starting the tab normally or re-visiting the tab everything worked fine but a pull to refresh the problem occurred.

I moved the app.ptr.done() to the start of the dynamic content generation, this means I do not get the ptr pre-loader but once the content is generated the accordion content works fine.

[nolimits4web]

@mbplautz thanks, see the issue now. Will try to find a fix for it on a days

[goodfellasthai]

Hello all, there appears to be another bug that was closed with exactly this issue on pull to refresh, I have the latest version of F7 and this is still happening, Bug #1473, to test yesterday I removed the pull to refresh and the scrolling worked fine within the tabs, I added the pull to refresh and got the content stuck/disappearing issue on iOS, this behaviour is not reproducible on the browser.

@nolimits4web will chase up my PM today regarding the project sponsorship. Can see they still havent done it.

[goodfellasthai]

All,

Another update if it helps. In my case it seems to be the presence of the ptr-preloader div, causing the scroll sticking and the content disappearing. (below)

  <div class="ptr-preloader">
    <div class="preloader"></div>
    <div class="ptr-arrow"></div>
  </div>

If I comment out this div everything works as expected, possibly something to do with the F7 code/css for the ptr-preloader div?

Regards

Paul

[rulrok]

For me, last version of framework7 2.x, iOS 12, iphone 5s, the css did not work. I had to use javascript to set my content (within .page-content) with height: 100% followed by a setTimeout with height: auto. I guess in my case it was a sync issue between the rendering of elements.

[mjwvb]

We fixed the scroll freezing for version 3.6.2 by adding "before" to .page-content, and giving it the height of the .page-content + 1px. This makes the page always scrollable, so it forces safari to always recalculate the overflowing.

See the following code:

.device-ios .page-content::before { display: block; content: ""; position: absolute; z-index: -99999; top: 0px; left: 0px; bottom: -1px; right: 0px; }

In the end we wrapped this css inside a .always-scrollable class, so we always have control over which page must be implement this behavior.

[sday]

@mjwvb thanks for posting that css. It's exactly what I needed. My accordion has a v-for and at initial rendering it doesn't expand enough to cause an overflow on the ios device. Later when data is loaded and the accordion now requires scrolling behavior, the scrolling doesn't work on ios device. (non device resident app, just pulling down a webapp from chrome browser on iOS device) I ended up here after just putting some filler

on my page to cause the inital render to require scrolling. With the filler the accordions behave normal. Looks like your css forces this scroll condition right at initial render even when no scroll is needed, so things work as expected after data is loaded even without the filler html. @nolimits4web if you still need a minimal repo that you can access with an IOS device browser I could set it up.

[holtwick]

@mjwvb thank you! This solved a similar issue for me where the scrolling was frozen when navigating back to an infinite list presenting page.

[holtwick]

@mjwvb @nolimits4web I think I found the reason why scrolling is not always reset correctly. .page uses an identity transform. If I remove that, the problem seems to be fixed. I added the following CSS to my project:

.page {
  transform: none;
  -webkit-transform: none;
}

It still seems to work fine with transitions as far as I can tell.

[nolimits4web]

@holtwick nice finding, not sure why, but it works 👍 Pushed this fix to repo

[holtwick]

@nolimits4web Great! I believe it is because those transformations usually trigger hardware accelerated painting, and they get the scrolling out of focus sooner. Therefore, switching back to regular painting modes improves the rendering and layout. But that's just a guess ;) Thanks for adding it!

[denizveizov]

HI all

I am running my store on Opencart 3 and recently installed an extention for better performance of the website. Basicly it caches the webpages for faster loads. It works like when someone for the first time visits a spacific page it creates a cache and when somebody else visits that page for second, third ..... etc time it loads extremely fast. If a page is cached for the first time by android device iphone devices cannot scroll the page, but if the page was cached by iphone for the first time it can be scroledl without any issues by all other devices.