Jump to content


Photo

Resizing Form (Mobile)


  • Please log in to reply
21 replies to this topic

#1 recursiveElk

recursiveElk
  • Members
  • 60 posts

Posted 27 September 2017 - 05:05 AM

Hi, attached is an example of resizing a basic form on an iphone with ios11

It seems that the Form/Resize event has a hard time getting/updating the right screen dimensions when switching between landscape and portrait mode.

The Resize event has not been changed and is just a generic 'inherited' default.

I've tried using tw3dispatch.settimeout to delay the resize, but that didn't work, any solutions to make sure the resize only runs (or reruns) after the self.height and self.width are changed?

PS. This seems to affect portrait mode a lot more than landscape resizing.

Thanks,

Direct Download Link: https://puu.sh/xJODH/2e66ed0933.MOV

#2 Laksekjønn

Laksekjønn
  • Members
  • 455 posts

Posted 27 September 2017 - 05:56 AM

At the previous version (SMS 2.2.2), I suspect the bottleneck is coming from the Resize event. Resize is firing multiple times, and this will reduce the browser's workload. When you re-size the browser window, you get two successive on Resize firing all the time. f.i. when you click at Next Form (goto form2)or you switch between portrait/landscape - the resize event is called. I don't know if they fixed this on the new alpha. The problem is the alpha does not like the XP, and XP is like old shoes. Anyway, I'll suggest you use handwritten HTML/CSS code using flexible layouts in the main screen.
  • recursiveElk likes this

#3 jarto

jarto
  • Administrators
  • 72 posts
  • LocationVaasa, Finland
  • Enterprise Edition

Posted 27 September 2017 - 12:38 PM

Yep, there seems to be two calls to resize during a device flip. Also, there are quite many form resizes during startup. I'll have a look at it and try to eliminate the extra ones.
  • Nico Wouterse and recursiveElk like this

#4 recursiveElk

recursiveElk
  • Members
  • 60 posts

Posted 27 September 2017 - 10:52 PM

Sorry, should have clarified that this was indeed done on the new Alpha.

>> I'll suggest you use handwritten HTML/CSS code using flexible layouts in the main screen.

Could you potentially clarify what you mean here? I'm currently using TLayout and custom CSS. How would i go about positioning the components with CSS given the SMS components are absolute positioned in the html on compile?

#5 jarto

jarto
  • Administrators
  • 72 posts
  • LocationVaasa, Finland
  • Enterprise Edition

Posted 28 September 2017 - 09:15 AM

I had a look at the resizes yesterday and was able to eliminate the extra resize during the device flip. There were also other bugs that i fixed in the resize, so the next Alpha update should work a lot smoother. I'll let you know when the update is available in SmartUpdate. And I hope that you'll let me know if this all is fixed.

Using HTML/CSS to make flexible layouts is possible if you use percentages: https://jonlennartaa...or-better-code/

However, if you use these perventages-tricks, bare in mind that the RTL will not trigger OnResize for you any more, when the size changes.
  • Czar and recursiveElk like this

#6 jarto

jarto
  • Administrators
  • 72 posts
  • LocationVaasa, Finland
  • Enterprise Edition

Posted 28 September 2017 - 11:03 AM

Yep, the update is now available on SmartUpdate:

28.9.2017

Improvements to Resizing:
- Minimize number of resizes during form create.
- Trigger only one resize during device flip.
  • ielite and recursiveElk like this

#7 recursiveElk

recursiveElk
  • Members
  • 60 posts

Posted 29 September 2017 - 05:29 AM

The issue has been largely resolved for the application i need it for (tablets) so that's excellent, but the bug still persists on mobile ios where it hangs as shown in the clip. This is occurring both in my heavier project and the fresh project with only a few divs and no resizing code. Potentially something to have a look into at a later date.

#8 jarto

jarto
  • Administrators
  • 72 posts
  • LocationVaasa, Finland
  • Enterprise Edition

Posted 29 September 2017 - 11:27 AM

Please attach a zip-file of a test project and I'll have a look at it.

#9 recursiveElk

recursiveElk
  • Members
  • 60 posts

Posted 01 October 2017 - 10:13 PM

Attached.

(hosted url used: http://numberworksnw...new/index.html)

Attached Files

  • Attached File  test.zip   241.21KB   2 downloads


#10 recursiveElk

recursiveElk
  • Members
  • 60 posts

Posted 02 October 2017 - 04:43 AM

Also of note: this same example when tested on various mobile devices seems to have very choppy scrolling with quite low fps w/ TW3ScrollBox implemented.
Note:
Devices tested:
- ios : smooth on iphone 7(new), choppy on ipad 3 (old).
- android : choppy on samsung s8 (new), samsung tablet (old)

The older devices understandably might struggle a bit more for whatever reason but the s8 should handle it more than fine.

I have tested toggling UseTransform property on/off as well.

#11 jarto

jarto
  • Administrators
  • 72 posts
  • LocationVaasa, Finland
  • Enterprise Edition

Posted 02 October 2017 - 08:19 AM

This is really strange. Chrome on Android is jerky while Firefox on the same device is a lot smoother.

Oh, and I can't reproduce the resizing problem with my iPhone or my Android phone.
  • recursiveElk likes this

#12 recursiveElk

recursiveElk
  • Members
  • 60 posts

Posted 02 October 2017 - 10:20 PM

Hopefully a solution can be found soon, this is pretty critical to our application.

As for the resizing bug, Did you try reproduce with the link provided as well? The issue doesn't happen on pretty much any device except my iphone now, only on chrome and not safari too.

#13 jarto

jarto
  • Administrators
  • 72 posts
  • LocationVaasa, Finland
  • Enterprise Edition

Posted 03 October 2017 - 11:18 AM

Hopefully a solution can be found soon, this is pretty critical to our application.

As for the resizing bug, Did you try reproduce with the link provided as well? The issue doesn't happen on pretty much any device except my iphone now, only on chrome and not safari too.


Please give me exact steps: For example, how many panels should I create?

BTW, when running the RetroBalls -demo, I noticed that the frame rate for Chrome on Android was way slower than Firefox on the same device. I'm going to investigate, if the problem happens to be in RequestAnimFrame.
  • Czar likes this

#14 recursiveElk

recursiveElk
  • Members
  • 60 posts

Posted 03 October 2017 - 10:30 PM

The exact reproduction is as follows:

If there are no panels added or displayed on screen, the screen resizes correctly(on orientation change).
If there are panels added that are visible on screen, the screen resizes sporadically, and incorrectly often(on orientation change).
If there are panels added to the scrollbox but not directly visible ( scroll down ) then the resizing seems to correct back(on orientation change).

Example: https://puu.sh/xPmc6/a222eea879.mp4

As you can see it seems to be a direct relationship between number of components visible and speed of resize.

It seems to be sporadic but commonly occurs with some of my bigger projects where layouts and several components are resized. Seems to only occur currently on testing with ios 11 but have had similar issues on chrome/android in the past.

BTW, when running the RetroBalls -demo, I noticed that the frame rate for Chrome on Android was way slower than Firefox on the same device. I'm going to investigate, if the problem happens to be in RequestAnimFrame.

Thanks, please keep us updated, as if no solution can be found i might have to switch back to setting overflow-y for the body, which leads to issues with chromes built in pull-to-refresh on mobile, etc.

#15 jarto

jarto
  • Administrators
  • 72 posts
  • LocationVaasa, Finland
  • Enterprise Edition

Posted 07 October 2017 - 12:54 PM

Ahh, now I get it. You're using Chrome on iOS. I had been testing with Safari. Gonna see what goes wrong here. Weird thing is, that Chrome/Android works flawlessly.

#16 jarto

jarto
  • Administrators
  • 72 posts
  • LocationVaasa, Finland
  • Enterprise Edition

Posted 07 October 2017 - 02:55 PM

Now that was a tricky bug. It only happened on iPhone and Chrome. The bug actually is in Chrome. It sends the resize -event too fast, while the window height is still wrong. When I googled around, there were suggestions of reacting to the resize after a delay, but I found a more elegant solution that does not require any delays.

Run SmartUpdate and the resize bug is gone.
  • recursiveElk likes this

#17 recursiveElk

recursiveElk
  • Members
  • 60 posts

Posted 08 October 2017 - 10:49 PM

Great work! I realise some of these bugs i've found have been particularly bothersome to deal with haha.

Any update on the choppy scrolling by the way?
I can confirm the issue exists across [Safari + Chrome on iOS] as well as [Chrome on Android].
Seems to affect slower devices much worse, but iOS 11/iPhone 7 handles perfectly while Android7/SamsungS8 is choppy.

Edit 0:
After Updating my Project compiles but is completely black!
is there a way i can rollback? Working on finding the issue now.
Edit 1: RESOLVED(redundant "position: fixed" line was causing issues)

#18 Czar

Czar
  • Members
  • 165 posts

Posted 11 October 2017 - 05:07 AM

@Jarto, any progress on your investigation (see RetroBalls post above)? I am finding the slow frame rate on Chrome on Android to be a real hassle and it is making our App experience quite unpleasant.

#19 jarto

jarto
  • Administrators
  • 72 posts
  • LocationVaasa, Finland
  • Enterprise Edition

Posted 11 October 2017 - 11:24 AM

I have not been able to make progress yet.

#20 jarto

jarto
  • Administrators
  • 72 posts
  • LocationVaasa, Finland
  • Enterprise Edition

Posted 12 October 2017 - 12:51 PM

Ha! Got the Android Chrome to run fast!

Try setting this:

w3_setStyle(ScrBox.Content.Handle, 'will-change', 'transform');

AND set ScrollController.UseTransForm to true

It did miracles on my Android device.

DISCLAIMER: We'll include this improvement into the SMS itself, so you do not need to set it yourself in the future.
  • Czar, ielite and recursiveElk like this




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users