bug: `IonLabel` does not re-render dynamic content when placed after an `IonList`

[crhayes]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• v7.x
• Nightly

Current Behavior

An IonLabel that appears below an IonList will not re-render dynamic values when the underlying value changes as a result of removing an item from the IonList.

Notes:

• This behaviour does not occur when the IonLabel appears above the list
• The value re-renders correctly when not placed inside an IonLabel
• I can only reproduce this on native iOS (simulator and physical device) and Safari browser
• I am experiencing this with Ionic React; I have not tried any other flavours of Ionic

Note that in the second image the sum is not correct.

Expected Behavior

The aforementioned IonLabel should correctly re-render dynamic values regardless of its placement relative to an IonList.

Steps to Reproduce

Setup

git clone git@github.com:crhayes/ionic-label-bug-repro.git
cd ionic-label-bug-repro
npm install
ionic build

# Test native iOS
ionic capacitor run ios

# Test Safari
ionic serve

Use the Repro

The repro contains a list of value items as well as a sum item. Clicking a value item will remove it and should update the sum.

1. Use the checkboxes to test the various cases in the Test Cases table
2. Click the interactive value items to remove them
3. Note that in Safari and native iOS the Sum does not update when value is rendered inside a label and below the list
4. Note the above case works in Chrome
5. Note that all other cases work in all environments and browsers

Test Cases

Inside Label?	Bottom?	Bug?
Y	Y	Y
Y	N	N
N	Y	N
N	N	N

Code Reproduction URL

https://github.com/crhayes/ionic-label-bug-repro

Ionic Info

Ionic:

   Ionic CLI       : 6.20.8 (/Users/hayes/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 6.5.6

Capacitor:

   Capacitor CLI      : 4.7.0
   @capacitor/android : not installed
   @capacitor/core    : 4.7.0
   @capacitor/ios     : 4.7.0

Utility:

   cordova-res : not installed globally
   native-run  : 1.7.1

System:

   NodeJS : v16.14.2 (/Users/hayes/.nvm/versions/node/v16.14.2/bin/node)
   npm    : 8.5.0
   OS     : macOS Unknown

Additional Information

My device details:

• iOS 16.1
• iPhone 14 simulator & iPhone 13 Pro Max simulator & iPhone 13 physical
• Safari Version 16.1 (18614.2.9.1.12)

[liamdebeasi]

Thanks for the report. I can reproduce this behavior, but this does not appear to be a bug in Ionic. It looks like Safari/WebKit is not re-painting when it should:

Note that the inspector shows "30" but the rendered output still shows "60". Highlighting the text seems to fix the issue (likely because of the re-paint).

Have you reported this to Apple at https://bugs.webkit.org/? As a temporary workaround, you could try manually updating the DOM node with the new sum to see if that avoids the issue.

[crhayes]

@liamdebeasi Thank you for the prompt reply. I appreciate how attentive you are to issues posted here!

but this does not appear to be a bug in Ionic. It looks like Safari/WebKit is not re-painting when it should:

My suspicion was that it was a Safari/Webkit issue. I'm not familiar with Web Components so I was/am unsure if it is at all related to the Ionic/Stencil code behind the scenes. I'm also unsure if this is something that can/should be worked around in Ionic/Stencil.

Have you reported this to Apple at https://bugs.webkit.org/

No, though after this conversation the next step looks like determining if this has already been reported, and if not, opening a new issue.

As a temporary workaround, you could try manually updating the DOM node with the new sum to see if that avoids the issue.

For now I've stopped rendering the value inside IonLabel as a fix for my use case.

[liamdebeasi]

I did a bit more digging, and it looks like this ::after pseudo element with a negative z-index is triggering the issue in Safari:

ionic-framework/core/src/components/item/item.scss

Lines 235 to 241 in 6dcd98b

	.item-native::after {
	@include button-state();
	transition: var(--transition);
	z-index: -1;
	}

This likely causes WebKit to composite the layer when it should not. There is a related issue in #25760, though I believe this was recently fixed in iOS 16.3. (Regardless, I'm not surprised this compositing issue is popping up in a different way)

You can also work around this bug by disabling the ::after pseudo element in your app:

ion-item.no-after::part(native)::after {
  content: none;
}

Place the .no-after class on the ion-item that renders your sum. Note that you will be unable to customize the background color of the item using our CSS variables. If you're looking to do this, you'll need to apply the background color directly to the native shadow part:

ion-item.no-after::part(native) {
  background: green;
}

[crhayes]

I did a bit more digging, and it looks like this ::after pseudo element with a negative z-index is triggering the issue in Safari...

🧠 📈

I can only imagine the rabbit-hole that was required to initially figure this issue out.. 😆. Maybe I'll go down it and learn a thing or two!

You can also work around this bug by disabling the ::after pseudo element in your app...

I can confirm that your suggestion also works around the issue, thanks!