Ionic-framework: bug: ion-fab-list buttons show as blanks until hovered on when list width exceeds screen width

[azharbeebeejaun]

Bug Report

Ionic version:


[ ] 4.x
[x] 5.x

Current behavior:

ion-fab-buttons in an ion-fab-list are not displayed until they're hovered upon using the mouse or tapped on when on mobile. Video available at https://tinyurl.com/y2cpmatk.

Expected behavior:

Buttons should be immediately visible.

Steps to reproduce:

Create ion-fab-button and a related ion-fab-list with as many buttons that the list will need to be scrolled on to see it completely.
Ensure the preview screen size is narrow (like 2-3 inches in width)
Click on the ion-fab-button at the bottom right.
The button to the right-most of the list are masked.

Related code:
Available on stackblitz.
URL: https://stackblitz.com/edit/ionic-angular-v5-mdcsrq?file=src%2Fapp%2Fapp.component.html

Other information:

Setting direction: rtl on the list somewhat prevents this but only for side=start and not when side=top.

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.16 (/home/azhar/.nvm/versions/node/v12.16.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.3.0
   @angular-devkit/build-angular : 0.803.28
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 26 other plugins)

Utility:

   cordova-res : 0.15.2
   native-run  : 1.2.2

System:

   Android SDK Tools : 26.1.1 (/home/azhar/Android/Sdk)
   NodeJS            : v12.16.3 (/home/azhar/.nvm/versions/node/v12.16.3/bin/node)
   npm               : 6.14.4
   OS                : Linux 5.4

[liamdebeasi]

Thanks, I can reproduce this. This looks like a bug in Chromium (the engine that powers Chrome and Edge). I will look into reporting this to the Chromium team.

[liamdebeasi]

I was able to verify that this issue happens outside of Ionic Framework and have filed an issue with the Chromium team: https://bugs.chromium.org/p/chromium/issues/detail?id=1156771

In terms of a temporary workaround, this issue should not occur if you have ion-fab horizontal="start" and ion-fab-list side="end".

[azharbeebeejaun]

Thanks a lot!

Unfortunately, moving the button isn't a viable solution currently. I've tried playing with the opacity as inspired from this SO answer and it works for now.
For the record, ion-fab-list's opacity property is being set to 0.99 and subsequently back to 1.0. Ugly, but it works for now. :disappointed:

colorPicker.style.opacity = 0.99;
window.setTimeout(() => { colorPicker.style.opacity = 1; }, 50);