Bad Material UI badge component displaying in safari

Asked Jan 25 '23 at 10:10

Active May 30 '23 at 12:55

Viewed 54 times

I have a Badge component. In chrome, firefox etc works well but in safari 16.3 I have a problem like on screenshots (https://i.stack.imgur.com/pY7OS.png). Sometimes showing the number, and sometimes is crushed like the second screenshot(https://i.stack.imgur.com/vwuuY.png)

Enabled all experimental functions but still have problems

EDIT: Code

<span><li>/</li></span>
                        <Badge badgeContent={posts > 0 ? posts : 0} invisible={posts === 0 ? true : false} color="error" showZero={false} key={`${posts}`}>
                            <li style={{ fontWeight: type === 2 ? "bold" : "400" }}>
                                <Link to={`/case/id=${props.caseId}/posts`} onClick={() => readPosts(2)}>Wpisy</Link>
                            </li>
                        </Badge>
                        <span><li>/</li></span>

edited May 30 '23 at 12:55

Olivier Tassinari

8,238
4
23
23

asked Jan 25 '23 at 10:10

Bartosz Bartosiewicz

It looks like your `/` character has a white background that is overlapping the badge. But we'd need to see the code to actually help solve the issue. – DBS Jan 25 '23 at 10:16
Look at https://i.stack.imgur.com/Vk5Fl.png – Bartosz Bartosiewicz Jan 25 '23 at 11:04
Please don´t add code as images. Add it as formatted text to your question. Code in images cannot be copied and tested. – burnsi Jan 25 '23 at 13:18
Okay, sorry. Now you have code – Bartosz Bartosiewicz Jan 25 '23 at 14:17

Bad Material UI badge component displaying in safari

0 Answers0