Foundation.mozilla.org: Left alignment bug in Firefox

[taisdesouzalessa]

In all hero sections from staging version we have a left alignment bug in Firefox. Here are some screenshots. I believe when we fix those issues for desktop, mobile will be solved as a consequence.

[amarlearning]

@taisdesouzalessa can i take this one ?

[gvn]

Hi @amarlearning! Thanks for your offer, but we're not quite ready for contributors yet on this project. Please feel free to check with us soon though! 👍

[alanmoo]

This has to do with a combination of the element wrap and the box shadow currently applied to headings. But it's also a difference in how FF and others render elements. If you want any left padding on the text boxes, this will likely happen when it wraps lines. Though I wouldn't say it's necessarily a bad thing; there's something fitting about our branding being about the web/highlighting text and the fact that minor differences like this are the nature of the web.

So, @taisdesouzalessa which would you prefer: No left padding (black edge is basically 2px away from the side of the text) or slight variations between browsers?

[taisdesouzalessa]

@alanmoo please correct me if I am wrong. If we remove the left padding this is the final rendering, right?

If so, I would prefer consistency over the lack of alignment in Firefox. I think the misalignment doesn't work in this case. The feeling we would like to convey with the Network site is trust and I think the lack of alignment can cause some anxiety in users' minds ("is it reliable?/is it broken?"). Also, our Internet Health page doesn't have the padding (the hero has but not the rest of the titles). So that would be my preference.

That being said, I find your idea about the nature of the web and the minor differences very interesting. It is a good perspective on that.

Would love to hear other perspectives, @hannahkane @xmatthewx @sabrinang @gvn

[gvn]

For consistency, I'm going to implement per your design above, Taís. 👍