bug: modal renders wrong first time loaded if <ion-range> is used in translucent footer toolbar

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior: If you have a modal with a fullscreen ion-content and translucent ion-header and ion-footer with a toolbar containing an ion-range (or an ion-radio-group, same behavior), the ion-content will not be rendered fullscreen the first time you open the modal. After the first time it will work if you open it again. It’s hard to explain, better check the example out I made, it’s a very eye-catching bug…

Expected behavior: The ion-content is always fullscreen, not only from the second time opening it on.

Steps to reproduce: New Ionic Angular app with Ionic 5.2.2 and Angular 9.1.9. Bug occurs in Android App, iOS App or with ionic serve.

Related code:

Simple new Ionic project with a modal with the bug

Other information: This worked with Ionic 4 and stopped working after migrating to Ionic 5. I already opened a topic in the Ionic Forum with more information about hoe I found the bug and where it’s occuring in my real project.

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.1
   Ionic Framework               : @ionic/angular 5.2.2
   @angular-devkit/build-angular : 0.901.9
   @angular-devkit/schematics    : 9.1.9
   @angular/cli                  : 9.1.9
   @ionic/angular-toolkit        : 2.2.0

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   NodeJS : v12.16.3
   npm    : 6.14.4
   OS     : Windows 10

[liamdebeasi]

I have confirmed this as a bug. When ion-content sets its offsets, it relies on offsetHeight. If a parent element has display: none, the offset values will be 0 (similar to how offsetParent will be null). When the modal is used for the first time, there is a race condition where the offsets are set before display: none is removed from ion-modal.

[mhartington]

Took a look @liamdebeasi

It seems that when the modal is first opened, the padding offsets are not applied on first show. Meaning we get a solid background.

Looking at the dom, the --offset-top and --offset-bottom vars are set to 0 on first show.

Then on subsequent shows, they are set correctly.