RTL inputs and labels in IOS not stable during animations.

[Khalid-Nowaf]

Ionic version:
[ ] 1.x
[ ] 2.x
[X] 3.x

I'm submitting a ...
[X] bug report
[ ] feature request
[ ] support request

Current behavior:

Inputs and labels components for "IOS only" in "RTL" not stable when the app animate "during scrolling, input focusing. here are the issues

• input and label margin change during "Scrolling" while input on focus
• label become invisible for a while during on focus event
• label and input some time overlay each other "for an unknown reason "
• input cursor strangely moves to the center of the screen.

Here is a video showing the Current behavior --> (https://vimeo.com/218399024)

NOTE: this issues will appear only in IOS Device or emulator.

Expected behavior:

the input and labels should be stable in "RTL" as they stable in "LTR"

Steps to reproduce:

I have created a repo branch for this issue --> (https://github.com/Khalid-Nowaf/ionic-rtl/tree/unsmooth-animations)

Related code:
clone the repo, then

npm install
ionic cordova run ios

[jgw96]

Assigning our resident RTL expert @AmitMY 😃

[AmitMY]

@Khalid-Nowaf I think you were correct linking the issue to transform (#11649) as it seems like it causes at least some of it.

Fortunately, some RTL fixes are already merged for Wednesday's scheduled release, and may fix some of the issues but not all of them.
I am working with @brandyscarney on getting that PR merged, along with some others that might help, and then I will review the rest of the problems here.

Thanks for reporting! I'll keep you updated when I look into it

[AmitMY]

@Khalid-Nowaf As I don't have a mac, and can't emulate iOS, I was looking into your code to see what went wrong.

Two things:

• Please use 3.2.1-201705192107 for ionic-angular
• In this line please try this.dir.toLowerCase(), as there is a check for dir === 'rtl' and as you might know, 'RTL' !== 'rtl'

Sorry I can't offer anything better at the moment, I'll try to get a mac working to test this.

[Khalid-Nowaf]

Thanks @AmitMY, I will try the next realse to verify what get fixed, and form there probably we will have a smaller list of issues, and with your help I will try my best to fix them and I make some PR. I have a quick question, I fork ionic repo and wondering is there a way to run e2e test in cordova device? Not in the browser? So I can test my changes in real device or emulator.

[AmitMY]

@Khalid-Nowaf Not an easy one.
You can hack it with https://github.com/apache/cordova-plugin-test-framework.
or perhaps https://github.com/angular/protractor/blob/master/docs/mobile-setup.md

[Khalid-Nowaf]

@AmitMY thanks!

[Khalid-Nowaf]

@AmitMY,@jgw96, I have tested the last ionic release, and the same issues appeared. I did some testing to answer the following:

• is this issue related to RTL?
  • yes and no, some issues, such as label flickering does exist in both, while input text cursor issue appears only in RTL.
• is this issue related to IOS mode "ios theme"?
  • no, I have test ios mode, on Android and none of the issues exist.
• is this issue related to IOS browser?
  • Yes indeed, since the problems do not appear in the Android nor the browser.

and I can conclude the problem exist only in IOS device for both IOS and Material Design mode.

This issues possibly caused by

• scrolling (animation) have some side effects.
• un-compatible CSS for IOS WebKit
• Keyboard plugin, since the keyboard, hides/shows (cursor/focus) and changes some of the CSS.

some issue related:
#228 ionic-plugin-keyboard
#11501
#4293
#6480

Here some videos
IOS --> on MD MODE
IOS --> on IOS MODE
ANDROID --> IOS MODE

[AmitMY]

@Khalid-Nowaf Are you using UI or WK on iOS?
Using WK is recommended as it leverages the newest webkit engine iOS has, and because this problem does not relate to the theme, but to the device itself, I wonder if that is the issue. (not using WK)

Installation instructions in case you are using UI and want to try it on WK - https://github.com/driftyco/cordova-plugin-wkwebview-engine#installation-instructions

[Khalid-Nowaf]

@AmitMY, I have test both, same issues.

[Khalid-Nowaf]

#11211

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.