Animate on page back behaving strange

I could not recommend framewokr7 any more, it is by far my absolute favourite.

I am having a super unusual issue where when I go to the previos page, either by swiping back or using the back button, the page content div is momentarily white for some reason. I know it’s the page content div because the nav bar seems to work as intended.

I do not have any code in my custom css file that influences the background color at all. Any tips or advice would be highly appreciated.

I have attached a photo which highlights the issue.

Any advice would be great

Photo doesn’t really help. For me seems like some JS error occurs there. Attach your phone to mac and debug it using Safari

Check the correct page structure, may be is Popup?

Thank you both for your responses. @shastox this occurs on all the pages and I am certain the page structure is correct as I have had issues with that in the past.

I tried to upload a video but am not allowed to. Just to clarify, the page actually loads loads once released, it does NOT remain white. The same effect happens when you push the back button, the page content goes white momentarily, then resumes.

It behaves perfectly when debugging on web browsers using npm start
I have attached a screenshot highlighting how well it works on a web browser.

It’s super frustrating as I have gone through all the files and can not seem to understand why this could be happening.

I have the same problem as you but I just ignore it.
When drag it to swipe back Web browser is working fine.
iOS , Android It is just show blank like that until completely swipe out the page.


Something like this.

@ChooChu yes that is exactly what is happening to me.

@nolimits4web as always, your wisdom is incredible. I followed what you mentioned in regards to the web inspector and uncovered an amazing tool that is going to save me hours!!!

I took a screenshot of where this is occurring, basically .framework7-root .page-previous is set to display:none !important somewhere. It is definitely not in my own code anywhere.

From the screenshot, you can see (where i have highlighted in pink) that I have unselected the option which allowed the previous page to be displayed as desired when in the process of swiping back.

Any ideas on how I can override this, would be incredible.

so , after you disable it then it’s working on your iOS ?
The idea just put style at the bottom of index.html set display:block !important;

.framework7-root .page-previous {
  display: block !important;

I haven’t done so just yet as I feel that would conflict with a lot of things to permanently have the previous page “visible”.

I am still exploring ways on how to make it visible as I am swiping back, or better yet to find the actual cause because it seems that all the other framework7 apps behave quite normal.

Maybe It’s because of loading too many graphics :stuck_out_tongue_winking_eye:
Finally I found someone like me lol look forward to see how to solve this problem.
I will trying to make it work also.

What I’m thinking , maybe It’s because of some css we made conflict with F7

Hahahaha, yes! this has been annoying me for over 6 months, I always leave it and then find myself coming back.

I don’t think it is any conflicting css as I have also in the past tried to remove all my custom css to find out if that might be the case but I still experience the same issue.

I have upgraded through many versions of f7 so at some point there may have been this conflict. except I’m pretty sure that this has happened ever since I started with the base multi tab template that is offered.

bad news
1.I just added display: block !important; still not working.
2.remove all css I make , still not working.

so , now I can confirm that it’s not because of our css lol

@ChooChu Good news :partying_face::partying_face::partying_face::partying_face:

I have finally found a solution that seems to work, it might not be the best, but so far I see no conflicts.

Simply put the following in the app.scss at the bottom (I tried just putting in the head of index.html but that did not work)

.router-transition-backward .page-previous,, {
display: block!important

Please let me know if this also works for you and if it causes any issues.

1 Like

yeah! It’s work!!! lol
You are genius! :smiley:

Look like it’s smoother than before also

**The image it’s look slow and lag from frame drop because of convert vdo to gif.

Im super glad to hear that it worked, are you using google maps plugin?

Yes, I’m using google map plugin. Why?

That is what is causing the issue, for some reason that plugin injects some css which cause page-previous to be display none

I have re shifted my code to the body section in index.html as having it in app.scss is not 100% reliable. sometimes the google plugin injects the css after which makes it more “important”.

having a style attribute in the start of body seems to be working well though.