[EmptyState] Shopify Polaris EmptyState image opacity is always set to 0!!!!!!

[shazzadParselab]

Summary

[EmptyState] The Shopify Polaris EmptyState image opacity is always set to 0! When I change it to 1, the image becomes visible

Create a css

polarise css look like---->

.Polaris-EmptyState__Image { opacity: 0; z-index: var(--p-z-index-1); transition: opacity var(--p-motion-duration-150) var(--p-motion-ease); }

when I change it ---> .Polaris-EmptyState__Image { opacity: 1 !important; } image becomes visible.

image appears and works correctly

<EmptyState heading="No orders yet" image="https://cdn.shopify.com/s/files/1/0533/2089/files/empty-state.svg"

{/* Force opacity 1 if needed */} >

[eibrahimov]

I have some issues with Empty-state image opacity

[shazzadParselab]

Hi Ibrahimov,

Thanks for reaching out. I understand you're facing an issue with the opacity of the empty-state image. Here's the solution:

Shopify Polaris EmptyState image opacity is always set to 0! Could you change it to 1?

polarise css look like---->

.Polaris-EmptyState__Image { opacity: 0; z-index: var(--p-z-index-1); transition: opacity var(--p-motion-duration-150) var(--p-motion-ease); }

when I change it ---> .Polaris-EmptyState__Image { opacity: 1 ! important; } image becomes visible.

On Tue, Mar 4, 2025 at 8:08 PM Edgar Ibrahimov @.***> wrote:

I have some issues with Empty-state image opacity

— Reply to this email directly, view it on GitHub https://github.com/Shopify/polaris/issues/13197#issuecomment-2697750372, or unsubscribe https://github.com/notifications/unsubscribe-auth/BOYO5TNKGKO2WVHZTMBQI2D2SWXU5AVCNFSM6AAAAABW6UHFGSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMOJXG42TAMZXGI . You are receiving this because you authored the thread.Message ID: @.***> [image: eibrahimov]eibrahimov left a comment (Shopify/polaris#13197) https://github.com/Shopify/polaris/issues/13197#issuecomment-2697750372

I have some issues with Empty-state image opacity

— Reply to this email directly, view it on GitHub https://github.com/Shopify/polaris/issues/13197#issuecomment-2697750372, or unsubscribe https://github.com/notifications/unsubscribe-auth/BOYO5TNKGKO2WVHZTMBQI2D2SWXU5AVCNFSM6AAAAABW6UHFGSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMOJXG42TAMZXGI . You are receiving this because you authored the thread.Message ID: @.***>

[shazzadParselab]

Try this out, and if the issue still isn't fixed, knock me—I’ll make a video tutorial for you.

On Wed, Mar 5, 2025 at 9:44 AM Shazzad Hossain @.***> wrote:

Hi Ibrahimov,

Thanks for reaching out. I understand you're facing an issue with the opacity of the empty-state image. Here's the solution:

Shopify Polaris EmptyState image opacity is always set to 0! Could you change it to 1?

polarise css look like---->

.Polaris-EmptyState__Image { opacity: 0; z-index: var(--p-z-index-1); transition: opacity var(--p-motion-duration-150) var(--p-motion-ease); }

when I change it ---> .Polaris-EmptyState__Image { opacity: 1 ! important; } image becomes visible.

On Tue, Mar 4, 2025 at 8:08 PM Edgar Ibrahimov @.***> wrote:

I have some issues with Empty-state image opacity

— Reply to this email directly, view it on GitHub https://github.com/Shopify/polaris/issues/13197#issuecomment-2697750372, or unsubscribe https://github.com/notifications/unsubscribe-auth/BOYO5TNKGKO2WVHZTMBQI2D2SWXU5AVCNFSM6AAAAABW6UHFGSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMOJXG42TAMZXGI . You are receiving this because you authored the thread.Message ID: @.***> [image: eibrahimov]eibrahimov left a comment (Shopify/polaris#13197) https://github.com/Shopify/polaris/issues/13197#issuecomment-2697750372

I have some issues with Empty-state image opacity

— Reply to this email directly, view it on GitHub https://github.com/Shopify/polaris/issues/13197#issuecomment-2697750372, or unsubscribe https://github.com/notifications/unsubscribe-auth/BOYO5TNKGKO2WVHZTMBQI2D2SWXU5AVCNFSM6AAAAABW6UHFGSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMOJXG42TAMZXGI . You are receiving this because you authored the thread.Message ID: @.***>

[gordonchanhk]

The Empty State image is intended to have opacity:0, it has another CSS class Polaris-EmptyState--loaded to make it become visible. However, it seems there is buggy issue that, when visiting a page by navigation, image load as usual. But if you stay on a page with Empty State, the image would appear due to the missing of such CSS class Polaris-EmptyState--loaded:

ref: https://community.shopify.com/c/shopify-apps/shopify-app-development-with-remix-and-polaris-empty-state-image/m-p/2974517/highlight/true#M90531

[keithmacinnis]

@gordonchanhk I experienced the bug by staying on a page with an empty list for an extended time, like you described. The fix was to add an item to the list and then remove it via my ui...?

This glitch has been driving me mad.. it is nice to know the workaround - thank you!

[github-actions[bot]]

Hi! We noticed there hasn’t been activity on this issue in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.

[zlac]

I have the same issue, the image opacity is 0