Respec: Improper display of offending references in Firefox

[Swapnilr1]

Important info

• ReSpec version: 24.8.0
• [x] I did a "hard refresh", but it's still busted.

Description of problem

During testing, I got a normative reference in an informative section which rendered like this

But what I was expecting?:
The word BARRRR to be in single line.

Disabling display: inline-block for .respec-offending-element fixes the issue. Or changing to display:inline also works.

[sidvishnoi]

Can you share the HTML that caused this?

[Swapnilr1]

Just add <p>A normative reference in informative section [[!payment-request]] and is illegal. But we keep it as normative and emit a warning.</p>
in basic.html after Line 54 (https://github.com/w3c/respec/blob/develop/examples/basic.html#L54).

Basically enforcing normative reference in any informative section will do.

[marcoscaceres]

So weird... I'd like to leave display: inline-block if possible... but we should figure out why it's doing the crazy rendering. I've never seen that. Can you check in multiple browsers?

[Swapnilr1]

Sorry, my bad, I should have mentioned this occurs in Firefox. Just checked in Chrome - worked fine.

[marcoscaceres]

Ok, reproduced... the bug is that base.css sets a[href] to margin: 0 -1px 0; for some reason. What might fix it is to set margin: 0; on respec-offending-element.

[marcoscaceres]

sorry, just on a[href].respec-offending-element.

[marcoscaceres]

I should file a web compatibility bug on Firefox... Chrome and Safari render this properly.

[sidvishnoi]

For the note, Edge also renders properly.
Good finding @Swapnilr1!

[Swapnilr1]

Thanks @sidvishnoi.
This is really strange - I never thought it could be a bug in Firefox.

[sidvishnoi]

@marcoscaceres minimal example: https://codepen.io/sidvishnoi/pen/BENGNR

[marcoscaceres]

Filed https://bugzilla.mozilla.org/show_bug.cgi?id=1541102

[marcoscaceres]

Thanks - added the reduced test case to the Firefox bug.

[Swapnilr1]

Should we patch this by setting a[href].respec-offending-element { margin: 0;} ?
This will fix it in Firefox, and Chrome is unaffected by setting margin to 0.

[marcoscaceres]

I've filed a bug on the W3C to remove the -1: https://github.com/w3c/tr-design/pull/176

@Swapnilr1 yes, your suggestion should work (it think). Please confirm.

[Swapnilr1]

Setting margin to 0 for .respec-offending-element a[href] fixes the issue in Firefox, and in Chrome causes no changes.
We can add this as CSS in some module, though I don't know which one would be most suitable. But now that you have opened https://github.com/w3c/tr-design/pull/176 do we need to patch it?

[marcoscaceres]

We can add this as CSS in some module, though I don't know which one would be most suitable.

Whichever file currently defines respec-offendng-element. I think that's respec2.css?

[marcoscaceres]

Just to be clear, we should temporarily patch it... and then remove our patch once w3c/tr-design#176 gets fixed.

[marcoscaceres]

Oh wow, it was a known issue from 5 months ago: https://bugzilla.mozilla.org/show_bug.cgi?id=1502610

[Swapnilr1]

Strange nobody filed a bug here when the issue was discovered in a ReSpec built specification.

[marcoscaceres]

I think the consensus was that it was a Firefox bug, so not worth fixing in ReSpec. However, given recent changes in Chrome, it seems Firefox was the one doing the right thing and Safari is wrong.