bug: ion-skeleton-text animation is not correct

[danielehrhardt]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:
If the skeleton text is used on a device like a Tablet it does flicker in the Middle of the Animation

Expected behavior:
Smooth Animation no flickering.

Steps to reproduce:
<ion-skeleton-text [animated]="true" ></ion-skeleton-text>
Use this on a FullHD Browser window.

Related code:
https://stackblitz.com/edit/skeleton-flickering

Ionic info:

   Ionic CLI                     : 6.12.2 (C:\Users\Daniel\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.5.1
   @angular-devkit/build-angular : 0.1100.3
   @angular-devkit/schematics    : 11.0.3
   @angular/cli                  : 11.0.3
   @ionic/angular-toolkit        : 3.0.0

Capacitor:

   Capacitor CLI   : 2.4.4
   @capacitor/core : 2.4.4

Utility:

   cordova-res : 0.15.2
   native-run  : not installed

System:

   NodeJS : v14.15.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.9
   OS     : Windows 10

[patrickbussmann]

Same issue here (on same project) 😀
(but with MacBook Pro Safari & Chrome)

[liamdebeasi]

Thanks for the issue. What device are you testing this on? I cannot reproduce this on my end.

[danielehrhardt]

Thanks for the issue. What device are you testing this on? I cannot reproduce this on my end.

You can see it in Google Chrome, Firefox, Edge.
https://skeleton-flickering.stackblitz.io

[danielehrhardt]

If the width is above the 800px

https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/skeleton-text/skeleton-text.scss

[liamdebeasi]

Thanks for the browser info. What physical device are you testing this on? (MacBook Pro, iPad, etc)

I tested this in Chrome on a MacBook Pro (using the internal display as well as an external display) and cannot reproduce the issue.

[danielehrhardt]

Thanks for the browser info. What physical device are you testing this on? (MacBook Pro, iPad, etc)

I tested this in Chrome on a MacBook Pro (using the internal display as well as an external display) and cannot reproduce the issue.

Could you see the Issue in the Gif i attached?
Maybe you are not able to see what the Problem is?

I tested now also on my Mac with Safari and Google Chrome.

When the Shine goes to the end it will flicker.

[liamdebeasi]

I can see the flickering in the "Hello" title in the gif. What kind of Mac are you testing on?

[danielehrhardt]

I can see the flickering in the "Hello" title in the gif. What kind of Mac are you testing on?

Okay, then you did not get what i mean.
When the Shine will arrive the end of the skeleton item it will reset a bit back.

[liamdebeasi]

Thanks for the clarification. Now that I can reproduce 😄 . Let me look into this a bit more.

[danielehrhardt]

Thanks for the clarification. Now that I can reproduce 😄 . Let me look into this a bit more.

Here is a possible fix:
https://stackblitz.com/edit/skeleton-flickering

[liamdebeasi]

I can reproduce this back to 4.11.13. I will look into a fix. edit: If someone wants to try and implement the other solution in #22694 (comment) or fix the issue using a modified background-position animation, please feel free! I will add the help wanted label.

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!

[danielehrhardt]

I can reproduce this back to 4.11.13. I will look into a fix. edit: If someone wants to try and implement the other solution in #22694 (comment) or fix the issue using a modified background-position animation, please feel free! I will add the help wanted label.

I do not understand. I already attached a Solution for it?
Should i create a PR?

[liamdebeasi]

If you think your solution would resolve the issue, then I recommend creating a PR. Instructions on how to do so can be found here: https://ionicframework.com/docs/contributing/how-to-contribute.

[liamdebeasi]

Thanks for the issue. This has been resolved via #22697, and a fix will be available in an upcoming release of Ionic Framework.

[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.