[Firefox] Loading the page make UserLinks icons very big for a short period of time

[nicobao]

Description

UserLinks icons in the footer are very large for a short amount of time on loading of the home page, before that everything go back to normal.

Steps to reproduce

1. Go to https://baozi.technology and scroll down to the footer.
2. Refresh the page.
3. Observe the large user links icon for a couple of seconds.

Expected result

The page should load normally, with icons directly in the preferred size.

Actual result

The page is first loaded with very large icons taking the whole window width before quickly changing to the normal preferred size.

Environment

Mozilla Firefox 74.0.1

[nicobao]

Identify code responsible for the bug

I was able to identify the code responsible for initially loading the icons with large width using breakpoints in the Firefox debugger:

<FontAwesomeIcon icon={faEnvelope} />

in ./src/components/UserLinks/UserLinks.jsx.

Potential solution

Constraint size in css directly to the FontAwesomeIcon component, rather than adjusting the size in the container.

Instead of:

.userLinks{
  font-size: 36px;
}

.userLinksNoSplit{
  font-size: 36px;
}

Do something like:

.theFontAwesomeComponent{
  font-size: 36px;
}

[nicobao]

I tried:

• suggestion above
• removing completely the usage of the userlinks component

None of these actions solve the issue.

According to Firefox Debugger, the error (images becoming huge) occurs on the following line:

document.addEventListener("DOMContentLoaded", function(event) {

[nicobao]

Similar issue solved here:

• Over sized icons on each page refresh FortAwesome/react-fontawesome#134 (comment)
• Icons load incorrectly (very large) in server side when using library.add (Nuxt.js) FortAwesome/vue-fontawesome#14 (comment)