1636786 - Legends in browser compatibility section incorrectly include dots

Status: RESOLVED MOVED

(Firefox :: General, defect)

Description

[Kagami Rosylight [:saschanaz] (they/them)]

What did you do?

1. Access https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/outerText
2. Scroll down to Browser Compatibility
3. See how the legends look

What happened?

Legends have a dot in their boxes on Firefox, while they have a short underline on Chrome.

What should have happened?

They should look same. (Edit: By removing those dots)

Is there anything else we should know?

Comment 1

[Kagami Rosylight [:saschanaz] (they/them)]

Attachment: firefox.png

Comment 2

[Kagami Rosylight [:saschanaz] (they/them)]

Attachment: chrome.png

Comment 3

[Peter Bengtsson [:peterbe]]

(In reply to Kagami :saschanaz from comment #0)

What should have happened?

They should look same.

I'm not sure that's important.

By the way, what I don't get is; what is that little dash/dot that's there?

Comment 4

[Kagami Rosylight [:saschanaz] (they/them)]

By the way, what I don't get is; what is that little dash/dot that's there?

Turns out it's from <abbr> inside the box. Yes, the visual appearance doesn't seems to be important if it's just from text decoration.

Comment 5

[Tobin Mori [:tmori]]

This is probably due to the browser renderer.

Comment 6

[Kagami Rosylight [:saschanaz] (they/them)]

Not sure I follow. <abbr> is expected to have dots, shouldn't it be disabled by text-decoration: none? Or maybe replace the element itself?

Even if you think this is a renderer bug, I think you should change the component instead of just closing this 🤔

Comment 7

[Tobin Mori [:tmori]]

Hi Kagami,

Sorry about that. I've transferred to the Firefox team. Can you update this issue with your browser version number?

Thanks!

Comment 8

[Kagami Rosylight [:saschanaz] (they/them)]

I still think the empty <abbr> inside the boxes are suspicious, and thus think this should be an MDN issue. Those boxes shouldn't include dots.

Comment 9

[Tobin Mori [:tmori]]

Hi there,

I compared the rendering of the <abbr> tag on a Firefox and Chrome browser (on a non-MDN site ) and that tag renders the same (using FF) as it does on MDN: It appears as a dot.

Therefore, it appears to be a Firefox browser issue, not specific to MDN.

Can you show me a site that renders the <abbr> tag differently using a Firefox browser?

Thanks!

Comment 10

[Kagami Rosylight [:saschanaz] (they/them)]

Hi Tobin,

Rendering itself is okay, but I think <abbr> tags should not be there, as they do not abbreviates anything. Dots are not expected in those boxes.

Comment 11

[Tobin Mori [:tmori]]

Ahh got it. I think we misunderstood the initial description of this issue.

You wrote "They should look same," but really they shouldn't be there at all right?

Let me review this with the team.

Thanks!

Comment 12

[Kagami Rosylight [:saschanaz] (they/them)]

Exactly! I fixed the initial description.

Comment 13

[Tobin Mori [:tmori]]

Thanks Kagami. we've put it in our backlog, so I will close this one now.

https://github.com/mdn/kuma/issues/7184