[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 */} > <style> {`.Polaris-EmptyState__Image { opacity: 1 !important; }`} </style>

[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 <#13197 (comment)>, 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) <#13197 (comment)> I have some issues with Empty-state image opacity — Reply to this email directly, view it on GitHub <#13197 (comment)>, 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 > <#13197 (comment)>, > 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) > <#13197 (comment)> > > I have some issues with Empty-state image opacity > > — > Reply to this email directly, view it on GitHub > <#13197 (comment)>, > 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