bug: IOS ion-select initialised off-screen, first time a value is selected the value is not rendered until something changes in page. #18843
Description
Bug Report
Ionic version:
[x] 4.x
Current behavior:
This could very well be due to Apple's implementation of their WebView but it's only the ion-select elements I've noticed it on.
on iOS, found on device and in simulator on OSX;
If a page is taller than the height of the device screen and an ion-select element is positioned off-screen, below the bottom, when scrolling to the item and selecting an option for the first time (e.g. changing from empty or no value to a value) the chosen value can be seen briefly and is then not rendered.
If any styling or content is changed that causes the value to be redrawn (presumably), such as;
- scrolling up, so the element is off-screen, then scrolling back down to bring it into view.
- choosing a different value in the same ion-select
- choosing a value in another select (not sure what this changes to affect the initial ion-select)
Then the value is rendered.
Steps to reproduce:
- build a page with a height taller than the device screen height, and position an ion-select such that you must scroll to bring it into view from its initial position.
- Select an option for that ion-select
- See the value be set then disappear
- Edit the same ion-select to a different option, or scroll it out of view and back into view.
- See the value now being rendered correctly.
Other information:
Using safari's inspector to view the elements as they change shows nothing to be wrong, and something as simple as scrolling the ion-select element out and back into view will cause it to be redrawn which suggests it may be down to the WebView and/or an order of operations on updating elements and styles.
Ionic info:
Ionic:
Ionic CLI : 5.2.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.5.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1
Capacitor:
Capacitor CLI : 1.0.0
@capacitor/core : 1.0.0
Cordova:
Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 8.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 8 other plugins)
Utility:
cordova-res : 0.5.1 (update available: 0.6.0)
native-run : 0.2.7 (update available: 0.2.8)
System:
ios-deploy : 1.9.4
ios-sim : 8.0.1
NodeJS : v12.5.0 (/usr/local/bin/node)
npm : 6.10.1
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001
(Capacitor is there, but I'm not making use of it...)