Framework7: Running a F7 project has high CPU load

[tiptronic]

• Framework7 version: 4.0.0 beta 25
• Platform and Target: Mac, iOs, Android (not tested on Windows)

When running devServer and opening any project in a browser (e.g. kitchen-sink at http://0.0.0.0:3000/kitchen-sink/vue/, the CPU-load jumps to 99% (quad-core i7 iMac)

It seems to constantly invalidate and re-render all styles.

This makes it impossible to preview a project on slower devices, because rendering impacts the whole performance of such a device. (If you want to check: Get an older Android device and run 'Cards expandable' on it -> It flickers like crazy)

Btw: you can reproduce it on Safari for Mac or Android WebView.
On Chrome and Firefox it works

[nolimits4web]

See this issue on desktop Safari, could be Safari issue on how it handles CSS vars. Will investigate

[nolimits4web]

Ok, found out it is a WebKit bug https://bugs.webkit.org/show_bug.cgi?id=194332

[tiptronic]

Cool! Great find!! I'll see, if I can disable the gradients and test again!

[nolimits4web]

Temporary solution, just add this CSS rule to custom stylesheet:

.md .navbar a.link:before,
.md .toolbar a.link:before,
.md .subnavbar a.link:before,
.md .data-table-rows-select a.link:before,
.md .data-table-pagination a.link:before,
.md .searchbar-disable-button:before,
.md .searchbar .input-clear-button:before,
.md .notification-close-button:before {
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 66%, rgba(255, 255, 255, 0) 66%);
}

[tiptronic]

Ah - so you mean it's really just affected, when custom properties inside gradients are used??

[nolimits4web]

Yes, so if we replace it here with actual value then issue with overload is gone

[ZMilosevich]

I also noticed, high cpu usage on desktop (OSX 10.14.3, Safari, Fr7 4.1.1), default theme: 'md'. When I switch to 'ios' theme it works fine. On Chrome and FF no issue at all with both themes 'md' or 'ios'. I tried css fix for 'md' theme but no luck.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.

[bcd55]

This is still a problem in Safari 13.0.3 with md theme. I added the suggested CSS rule and that solved it for me. Thanx!

[webraptor]

Temporary solution, just add this CSS rule to custom stylesheet:

.md .navbar a.link:before,
.md .toolbar a.link:before,
.md .subnavbar a.link:before,
.md .data-table-rows-select a.link:before,
.md .data-table-pagination a.link:before,
.md .searchbar-disable-button:before,
.md .searchbar .input-clear-button:before,
.md .notification-close-button:before {
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 66%, rgba(255, 255, 255, 0) 66%);
}

on a 2.6 GHz 6-Core Intel Core i7 processor, running on MBP 16" 2019, MacOS Catalina:

• without this CPU usage is roughly 10%
• with this CPU usage is less than 2%

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.