Bug - : Website: Extremely large icons

[eltonbautista]

trafficstars

Complete the following REQUIRED checkboxes:

• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [X] The title of this issue follows the Bug - location of bug: brief description of bug format, e.g. Bug - React section: Knowledge Checks don't link to resource

The following checkbox is OPTIONAL:

• [ ] I would like to be assigned this issue to work on it

---

1. Description of the Bug:

Hello! I have encountered this bug a few times on several different lessons. I'm not sure if it's a problem with my Chrome or VM, but sometimes when I load into the TOP website I am prefaced with extremely large icons.

I have attached a video at the end, sorry if it looks weird it was my first time recording a screen.

2. How To Reproduce:

What steps one might need to take in order to reproduce this bug, e.g.:

1. Open Google Chrome.
2. Restore previous session via clicking the button, or ctrl+shift+t to reopen previous tabs.

3. Expected Behavior:

A brief description of what you expected to happen, e.g.:

1. Visit lesson page but with normal sized icons.

4. Desktop/Device:

• Device: PC
• OS: Xubuntu (as per VM instructions via TOP)
• Browser: Google Chrome
• Version: Version 98.0.4758.102 (Official Build) (64-bit)

5. Additional Information:

https://user-images.githubusercontent.com/94667178/155334107-2a71e235-9da1-48d2-bf8d-fd325e3f9978.mp4

[dm-murphy]

This issue has been transferred to the main site repo

[xandora]

I think this was supposed to be fixed in #2642 ?

[KevinMulhern]

Thanks for reporting @eltonbautista, and thanks for including the video, it is immensely helpful.

@xandora I think those changes might have only reduced the frequency of it unfortunately 😓

I believe the issue is that we are loading two stylesheets and one of them is being blocked,

• The first stylesheet is through the asset pipeline for our older sass and bootstrap CSS.
• The second is through webpacker and loads in the newer Tailwind styles we use.

It seems like the second stylesheet is sometimes blocked from loading on page load. You can see it in the video, the top of the page has no styling and we recently switched the navbar over to Tailwind. When they scroll down and reach the lesson content, the styles come back again. That content is still using our old CSS.

[eltonbautista]

I just noticed that 2 parts of the I sent were commented out. I have updated the original post, my comments for "How to Reproduce" as well as "Expected Behavior" are now visible if that might help you guys out solving it. Note: I've never experienced it when loading onto the site by clicking "next lesson" or just going directly to a lesson from the curriculum list. This bug only happens when I restore session or use ctrl+shift+t to reopen old tabs - as described in my original comment.

[bappyasif]

@KevinMulhern just a note: im also facing this 'extremely enlarged icons' issue when i'm 'opening chrome, with "start where i left off" option enabled', and i also asked this in discord as well message link, also, thanks to leo for introducing me to this issue initially, much appreciated....

[bappyasif]

@KevinMulhern is this issue solved, cause i'm not seeing this from 'initial browser start view-with where left off option'

[KevinMulhern]

I don't think so @bappyasif, we haven't released anything recently which could resolve it.

[bappyasif]

well, if that makes it any better or worse, im not seeing that on my end from that scenario, where i start chrome, with "start where i left off", option enabled, is no longer showing me 'extremely large' icons which it was used to. just so you know, and happy coding :) @KevinMulhern

[KevinMulhern]

I haven't heard of this one occurring again since the upgrade to Tailwind 3. Closing.