Hovering over buttons in AppBar is rectangular for short time

Question

Hovering over buttons in AppBar is rectangular for short time

robsch opened this issue 3 years ago · comments

This is also visible on the current AppBar on https://svelte-materialify.vercel.app/

Happens with Buttons in this structure:

<AppBar>
  <div slot="icon">
    <Button fab depressed>
      <Icon path={mdiMenu} />
    </Button>
  </div>
 ...
<AppBar>

Actually, I would let the hovering effect be rectangular in the AppBar. What would be a quick fix for the current version?

btw. the buttons make problems in the dense AppBar as well.

Florian-Schoenherr · Answer 1 · Fri Apr 16 2021 23:48:31 GMT+0800 (China Standard Time)

@robsch I can't really see the first issue, what browser are you on? I see the problem on the dense one, the icon-buttons are not getting smaller.

Robert · Answer 2 · Sun Apr 18 2021 00:09:03 GMT+0800 (China Standard Time)

I see this with Firefox on CentOS 8. Indeed, on my windows machine I don't see this effect in Firefox.

Florian-Schoenherr · Answer 3 · Sun Apr 18 2021 00:31:01 GMT+0800 (China Standard Time)

hmmm.. can you provide a screenshot? Seems like an interesting issue.

Robert · Answer 4 · Tue Apr 20 2021 17:36:34 GMT+0800 (China Standard Time)

Here is a small video. Taken from AppBar page:

vokoscreenNG-2021-04-20_11-34-15.mp4

Robert · Answer 5 · Mon Apr 26 2021 15:19:17 GMT+0800 (China Standard Time)

I've seen the same issue also within a Footer, so it is not solely related to the AppBar. Probably, it has nothing to do with the containing element. Example:


<Footer fixed padless class="justify-center flex-column">
    <div class="mt-2 mb-2">
        <a use:link href="/faq">
            <Button text rounded>FAQ</Button>
        </a>
        <a use:link href="/colop">
            <Button text rounded>COLOP</Button>
        </a>
        <a use:link href="/terms-and-conditions">
            <Button text rounded>TERMS AND CONDITIONS</Button>
        </a>
        <a use:link href="/privacy-policy">
            <Button text rounded>PRIVACY POLICY</Button>
        </a>
        <a use:link href="/legal-information">
            <Button text rounded>LEGAL INFORMATION</Button>
        </a>
    </div>
</Footer>

Florian-Schoenherr · Answer 6 · Mon Apr 26 2021 19:08:03 GMT+0800 (China Standard Time)

Hm, can you see this effect on any other implementations of material? (They should use a similar approach)
Check it on Vuetify for example.

Robert · Answer 7 · Mon Apr 26 2021 19:37:42 GMT+0800 (China Standard Time)

Tried menu button here and indeed there is the same effect. What does that mean?

Florian-Schoenherr · Answer 8 · Mon Apr 26 2021 20:05:33 GMT+0800 (China Standard Time)

They are rectangles, but these are circles: https://vuematerial.io/components/menu/#menu-rich
I would guess it's a linux issue, maybe graphics driver bug? If it's only on centOS, might be related to that.
Never had experience with it, but it seems like it.

I see this with Firefox on CentOS 8. Indeed, on my windows machine I don't see this effect in Firefox.

Robert · Answer 9 · Mon Apr 26 2021 22:53:33 GMT+0800 (China Standard Time)

Okay. CentOS is in a VM. I've tried it wihin a Fedora machine (also a VM) and there all is fine. Yes, it might has something to do with graphic drivers in combination with the VM (VMWare Fusion on a MacBook).

It might be fixable, but I'm not an expert regarding CSS and cannot do this. I'd say, svelte-materialify is not the source of the problem. You can close the issue if you don't want to do anything about it.

Florian-Schoenherr · Answer 10 · Mon Apr 26 2021 23:39:06 GMT+0800 (China Standard Time)

It's probably not even css related, is what I mean 👍

Robert · Answer 11 · Tue Apr 27 2021 00:00:30 GMT+0800 (China Standard Time)

I've got that. However, it might be fixable via CSS anyway.

Egal ... 😉