CSS Penguin Step 75: the change is not visible on some browsers

Describe the Issue

The instruction starts with:

If you look closely, the heart emoji is slightly different.

I can see the purple heart has become slightly bigger in Firefox. However, I can’t see the difference in Chrome or Edge.

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/step-75

Your code

.shirt {
  font: bold 25px Helvetica, sans-serif;
}

.shirt div {
  font-weight: initial;
}

Expected behavior

We can change the first sentence to:

In some browsers, the heart emoji may look slightly larger.

(I changed “different” to “larger”, so that campers don’t have to spend too much time looking for the difference)

And the last sentence to:

To make it consistent on different browsers, target the div with the heart emoji, and set its font-weight to its original value.

Screenshots

https://user-images.githubusercontent.com/25644062/200926484-26f72d6b-ff19-489a-a03c-3881b2cb1788.mp4

System

• Device: Laptop
• OS: Windows 10
• Browser: Chrome (ver. 107.0.5304.106), Edge(ver. 107.0.1418.35), Firefox (ver. 106.0.5)

Additional context

No response

[naomi-lgbt]

I don’t see the need to add steps that import and remove a font for this.

I’d much rather stick with adding the note “In some browsers, the heart emoji may look slightly different from the previous step.” so that we can focus on the concepts this project is actually trying to teach.

[sidemt]

Personally, I don’t think so. For example, if you see a forum post saying “The emoji on my page looks different. How can I fix it?” then I guess you would want to ask how different it is. That’s what I’m feeling here.

However, it seems like losing color was a Chrome’s bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1266022

So I think it’s okay to forget about colors. I even think it’s okay to remove this step if we can allow that slight change in size.