Edit
I have recently discovered a solution to the unusual problem I was facing with the material-ui Chip Component. By adding the line -webkit-appearance: none; to the root div for the Chip, the issue seems to resolve itself. However, this line is being automatically added by something like inline-styler, and I would prefer it not to add vendor prefixes without my consent.
If you have any further insights on this matter, I would greatly appreciate it.
The problem with the Chip component becomes evident when viewed at different zoom levels, as shown below:
Zoomed out - 75%
https://i.stack.imgur.com/qzHHZ.png
Zoomed out - 90%
https://i.stack.imgur.com/bvbTu.png
Normal zoom - 100%
https://i.stack.imgur.com/FOPb0.png
Zoomed in - 110%
https://i.stack.imgur.com/RvI90.png
This peculiar behavior persists regardless of the browser used (tested on Chrome, Safari, and Firefox, with some inconsistencies noted in Safari). It should be mentioned that all testing was done on OS X.
Below is the code snippet for the Chip:
<Chip
key={`ffeffef`}>
<Avatar size={32}>B</Avatar>
Blah blah
</Chip>
Interestingly, the problem seems to occur only under certain circumstances, especially when using the Avatar. The inconsistency is more pronounced when the component "hot loads" rather than after a fresh refresh.
Despite the CSS not specifying a border, the Chip appears as if it does.
Your assistance in resolving this issue is highly valued. Thank you.