RonnySchleicher opened a new issue #201: I  Progress With iOS 13.4, all css 
animations break after the keyboard has been used once - this ist very critical!
URL: https://github.com/apache/cordova/issues/201
 
 
   # Bug Report
   With iOS 13.4, all css animations break after the keyboard has been used 
once - this ist very critical ❗️ 
   
   ## Steps to reproduce
   * Install the newest X-Code Version 11.4 beta (11N111s) on your Mac with 
macOS 10.15.3 - this is the only way to use iOS 13.4
   * Install the newest iOS 13.4 beta on an iOS 13.4 capable iPhone (iPhone 6S 
or newer) See: https://developer.apple.com/de/support/install-beta/ 
   * Create a fresh an new Cordova App for ios. You can use follow script:
   ```
   #!use this two lines to install the lastest cordova version 
   #!sudo npm uninstall -g cordova
   #!sudo npm install -g cordova
   rm -r PhoneGap_ios
   cordova create PhoneGap_ios de.test.test Test
   cd PhoneGap_ios
   cordova platform add ios --save
   cordova plugin ls
   ```
   * Open the X-Code Project and add follow line in the cordova index.html 
(project/Staging/www/index.html)
   ```
   <div><input type='text'></div>
   ```
   The complete changed index.html look like this
   ```
   <!DOCTYPE html>
   <!--
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at
   
       http://www.apache.org/licenses/LICENSE-2.0
   
       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
        KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
   -->
   <html>
       <head>
           <!--
           Customize this policy to fit your own app's needs. For more 
guidance, see:
               
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
           Some notes:
               * gap: is required only on iOS (when using UIWebView) and is 
needed for JS->native communication
               * https://ssl.gstatic.com is required only on Android and is 
needed for TalkBack to function properly
               * Disables use of inline scripts in order to mitigate risk of 
XSS vulnerabilities. To change this:
                   * Enable inline JS: add 'unsafe-inline' to default-src
           -->
           <meta http-equiv="Content-Security-Policy" content="default-src 
'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 
'unsafe-inline'; media-src *">
           <meta name="format-detection" content="telephone=no">
           <meta name="msapplication-tap-highlight" content="no">
           <meta name="viewport" content="user-scalable=no, initial-scale=1, 
maximum-scale=1, minimum-scale=1, width=device-width">
           <link rel="stylesheet" type="text/css" href="css/index.css">
           <title>Hello World</title>
       </head>
       <body>
           <div class="app">
               <h1>Apache Cordova</h1>
               <div id="deviceready" class="blink">
                   <p class="event listening">Connecting to Device</p>
                   <p class="event received">Device is Ready</p>
               </div>
               <div><input type='text'></div>
           </div>
           <script type="text/javascript" src="cordova.js"></script>
           <script type="text/javascript" src="js/index.js"></script>
       </body>
   </html>
   
   When I start the app on the iPhone, the lettering ** Device Ready ** 
flashes. This blinking is implemented with a css animation.
   
   
![image](https://user-images.githubusercontent.com/1914203/75041500-fccb7b00-54bc-11ea-863e-dfefe1869ef5.png)
   
   If the **Input** is clicked and the keyboard appears, the css animation 
stops working at this moment. Forever!
   
   
![image](https://user-images.githubusercontent.com/1914203/75041770-8c712980-54bd-11ea-97b7-3dc206b0d767.png)
   
   Even if the ** input ** loses focus again, the css animation does not work.
   
   ### What is expected to happen?
   The css animation work.
   
   ### What does actually happen?
   The css animation does not work.
   
   
   ## Information
   <!-- Include all relevant information that might help understand and 
reproduce the problem -->
   
   
   
   ### Command or Code
   <!-- What command or code is needed to reproduce the problem? -->
   
   
   
   ### Environment, Platform, Device
   <!-- In what environment, on what platform or on which device are you 
experiencing the issue? -->
   
   
   
   ### Version information
   <!-- 
   What are relevant versions you are using?
   For example:
   Cordova: Cordova CLI, Cordova Platforms, Cordova Plugins 
   Other Frameworks: Ionic Framework and CLI version
   Operating System, Android Studio, Xcode etc.
   -->
   
   
   
   ## Checklist
   <!-- Please check the boxes by putting an x in the [ ] like so: [x] -->
   
   - [x ] I searched for existing GitHub issues
   - [x ] I updated all Cordova tooling to most recent version
   - [ x] I included all the necessary information above
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
[email protected]


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to