Remove negative z-indexes from Image component

[elliotdickison]

Is there an existing request?

• I have searched for this request

Describe the feature request

Apple recently released Safari 18.3 and broke a plethora of react-native-web images in our app on both iOS and macOS. The issue seems to be that Safari's [notoriously buggy] handling of negative z-indexes changed in a way that caused our react-native-web images (which use z-index: -1 under the hood) to disappear behind every other element on the page.

Unfortunately we can't come up with a MRE for this - it happens 100% of the time for images in our horizontal recycler-list-views but only when the view has overflow. Expand the page width and the images pop back in. I know this isn't enough to go on for a real bug report, but given that our code works in every other browser (including Safari < 18.3), that switching to z-index: 0 fixes the issue, and that Safari is known for poor handling of negative z-indexes, we're pretty confident this is a Safari issue.

I'm opening this in hopes that a) someone else has experienced this and can shed more light on the issue and b) someone might be able to explain why negative z-indexes are necessary on the image component. We've patched the z-indexes to be 0 in our app and it looks like everything is working fine in modern browsers (including the accessible image context menu).

[danicunhac]

@elliotdickison try adding the following to your image css styling. This should hopefully solve the issue that WebKit causes when the page becomes scrollable.

    willChange: 'transform',
    transform: 'translateZ(0)',
    backfaceVisibility: 'hidden',

[Freddy03h]

Experiencing the same bug since Safari 18.3, on iOS, iPad OS and macOS in FlashList (which use recycler-list-view under the hood)

[elliotdickison]

@danicunhac We've used the translateZ hack for Safari in the past but unfortunately it caused all sorts layering issues in this particular case. But my question is, why not omit the negative z-indexes in the first place so no hacks are necessary? I'm sure there was a reason for them once upon a time, but is the reason still valid? If it was to support some legacy browser I'd bet most react-native-web users would rather drop it in favor of support for Safari 18.3+.