search

fudgebucket27 / Lexplorer

Loopring explorer alternative
14 stars 10 forks source link

mudpagination icons are backwards for some users #176

Closed fudgebucket27 closed 2 years ago

fudgebucket27 commented 2 years ago

I had a user say that the forward and back icons for the mud pagination component are backwards on their browser.

Firefox: image

Brave: image

I'm having trouble recreating this on my end though

modersohn commented 2 years ago

Yeah, that's what @danielsolistensvik saw on his end too while we did PR #163 (see screenshots there). He worked around it by assigning seemingly wrong icons, but then they were mixed up for me on Safari.

This looks like a bug in MudBlazor. I'll see if I can find something.

modersohn commented 2 years ago

Aha, I can see it now with Safari too - this only shows up in dark mode!

image

But strangely enough I can't see it on https://mudblazor.com/components/pagination#item-count

modersohn commented 2 years ago

I've tried everything to reproduce this with try.mudblazor.com but could not. OTOH if I enter one of the default MudPagination snippets to our accounts page for testing, it mixes up the icons in dark mode too.

Which leads me to believe that the issue occurs only with server-side rendering.

fudgebucket27 commented 2 years ago

Hmm I can recreate the behaviour when browsing on my android phone. Using Chrome here

On Thu, 23 June 2022, 2:09 am modersohn, @.***> wrote:

I've tried everything to reproduce this with try.mudblazor.com but could not. OTOH if I enter one of the default MudPagination snippets to our accounts page for testing, it mixes up the icons in dark mode too.

Which leads me to believe that the issue occurs only with server-side rendering.

— Reply to this email directly, view it on GitHub https://github.com/fudgebucket27/Lexplorer/issues/176#issuecomment-1163317232, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIDWTYR4XKFTVGSS4DXP3TVQM3DLANCNFSM5ZKLTNJQ . You are receiving this because you were assigned.Message ID: @.***>

fudgebucket27 commented 2 years ago

You're right. Only with dark mode

On Thu, 23 June 2022, 6:51 am John, @.***> wrote:

Hmm I can recreate the behaviour when browsing on my android phone. Using Chrome here

On Thu, 23 June 2022, 2:09 am modersohn, @.***> wrote:

I've tried everything to reproduce this with try.mudblazor.com but could not. OTOH if I enter one of the default MudPagination snippets to our accounts page for testing, it mixes up the icons in dark mode too.

Which leads me to believe that the issue occurs only with server-side rendering.

— Reply to this email directly, view it on GitHub https://github.com/fudgebucket27/Lexplorer/issues/176#issuecomment-1163317232, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIDWTYR4XKFTVGSS4DXP3TVQM3DLANCNFSM5ZKLTNJQ . You are receiving this because you were assigned.Message ID: @.***>

modersohn commented 2 years ago

So I went ahead and tried to create a test-case to reproduce the bug with server side rendering, but it worked:

image

So it looks like it's something in lexplorer only, maybe some external file that wasn't updated or doesn't get updated with deploying? Running out of ideas...

modersohn commented 2 years ago

It's wild - if I look at the HTML source, the svg path actually doesn't change when I change themes but the icon flips horizontally nevertheless.

modersohn commented 2 years ago

Getting closer... If I enable dark mode, for some reason the mud pagination class gets mud-pagination-rtl added:

image

RTL here is right to left, i.e. languages like arabic. This is clearly wrong and seems to cause the horizontal mirroring, but I need to find out why!

modersohn commented 2 years ago

Wow, it's getting weirder and weirder. If you look at an account with lots of tokens (e.g. 32714), the built-in pager is switching completely to right-to-left mode when turning on dark-mode:

image

I think I tried everything that I could come up with, including adding a MudRTLProvider, but I can't figure out why only MudPagination behaves that way and why it's only happening with our project.

modersohn commented 2 years ago

Here's a link to view the issue in production: https://lexplorer.io/account/32714

modersohn commented 2 years ago

Thanks to the help from SaeedPrez on MudBlazors discord, I have now learned that this issue is caused by our unnamed CascadingValue parameter for _isDarkMode.

Because it is unnamed, Blazor will just try and guess to match cascading parameters via type and this ended up being matched to the RightToLeft cascading parameter of MudPagination. Will fix ASAP.

SaeedPrez commented 2 years ago

Thanks to the help from SaeedPrez on MudBlazors discord, I have now learned that this issue is caused by our unnamed CascadingValue parameter for _isDarkMode.

Glad I could help ☺ Good luck with your project.