tacos_tacos_tacos
tacos_tacos_tacos

Reputation: 10575

Border appears around material-ui Chip component inside at normal zoom but not when zoomed in or out, on all browsers

Edit

I have found that if I add the line -webkit-appearance: none; to the root div for the Chip, the problem corrects itself. However, that is automatically being added by inline-styler or something, and I really wish it would stop adding vendor prefixes for reasons not just including this one.

Any more insight is appreciated.

I have a really odd problem with the material-ui Chip Component. It's pretty self-explanatory if you look below at the same Chip at different zoom levels:

Zoomed out - 75%

75%

Zoomed out - 90%

90%

Normal zoom - 100%

100%

Zoomed in - 110%

110%

I've never seen anything like this before and I am curious as to what it could be. FYI, it is the same problem whether using Chrome or Safari or Firefox, although on some browsers (notably Safari) it doesn't work at any zoom level. Note that I am testing on OS X.

The code for the Chip is:

        <Chip
          key={`ffeffef`}>
          <Avatar size={32}>B</Avatar>
          Blah blah
        </Chip>

When I do not use the Avatar it sometimes works but I think it only appears like it does when it "hot loads" the component, not after a fresh refresh. It is a very odd problem.

The CSS does not indicate it should have a border as it does.

Any help is appreciated.

Upvotes: 2

Views: 768

Answers (1)

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12862

This happens, because <Chip> component renders a div with type="button" attribute, but in last versions of materialize-css there is set a rule:

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button;
}

I've fixed it by setting:

[type=button]{
  -webkit-appearance: none
}

In a global css file.

By the way, no only <Chip> component is affected, I've run in this issue with <ListItem>. Searching issues on github, I saw that people complain about other components too. Hope maintainers will fix this soon.

Upvotes: 1

Related Questions