freeCodeCamp
Middle div in action row conflicts with button
Describe the Issue
Top bar script.js button misbehaves on Firefox browser on labs and workshops. Sometimes it works and many times not. What's strange is resizing my screen to about half my PC or the tablet view makes the button function.
Affected Page
Labs and Workshop where code from user is expected.
Steps to Reproduce
- Open a lab or workshop in Firefox browser
- Click the <script.js> button to toggle the JavaScript file
Expected behavior
It should display the content of the JavaScript file.
Screenshots
I can't click the script button to see my file.
System
- Device: Lenovo IdeaPad 3 14IIL05
- OS: Ubuntu 24.04.3 LTS
- Browser: Firefox
- Version: 144.0.2 (64-bit)
Additional context
No response
Hey @raffyabydc,
Thank you for your report.
Could you clarify a couple of things?
- Could you add at least one link to the lab or workshop where this behavior happens? If you take a look at the browser's console (not the one on page) when clicking the buttons, is there any error appearing?
- Are you being logged in when that happens? Does it also happen in incognito mode?
- Do other buttons work? For the state from your image, are other tabs visible/hidden?
Oh, thank you for the response @gikf . Unfortunately, and I'm very sorry for this because I can't seem to recreate to bug as I am trying now for your request. I don't know what caused it earlier but it definitely happened to me a lot of times.
Now to answer some of your questions, yes I am logged in when it happens, and the other buttons work, just the Script one didn't. For the tabs, the clickable remaining buttons shows the corresponding tabs but the Javascript file won't as I can't click the Script button.
Oh, I seemed to recreated it, it happens when I use ctrl + '+' to zoom in on my browser window. And testing it on Chrome, it's the same behavior. Here's the link of what I'm testing: https://www.freecodecamp.org/learn/full-stack-developer/lab-random-background-color-changer/debug-a-random-background-color-changer.
Fore the console logs, there are some but I don't know to filter which are related to the issue so I will just paste here the whole console.log after I refresh the same page on my Firefox. Here:
None of the “sha512” hashes in the integrity attribute match the content of the subresource at “https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015”. The computed hash is “z4PhNX7vuL3xVChQ1m2AB9Yg5AULVxXcg/SpIdNs6c5H0NE8XYXysP+DGNKHfuwvY7kxvUdBeoGlODJ6+SfaPg==”. debug-a-random-background-color-changer Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/config/TeX-AMS_HTML.js?V=2.7.4 TeX-AMS_HTML.js Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015 vcd15cbe7772f49c399c6a5babf22c1241717689176015 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015. (Reason: CORS request did not succeed). Status code: (null).
None of the “sha512” hashes in the integrity attribute match the content of the subresource at “https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015”. The computed hash is “z4PhNX7vuL3xVChQ1m2AB9Yg5AULVxXcg/SpIdNs6c5H0NE8XYXysP+DGNKHfuwvY7kxvUdBeoGlODJ6+SfaPg==”. debug-a-random-background-color-changer Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://www.googletagmanager.com/gtm.js?id=GTM-57R6KJM>m_auth=>m_preview=>m_cookies_win=x gtm.js Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://js.stripe.com/v3 v3 Error: Not allowed to define cross-origin object as property on [Object] or [Array] XrayWrapper 3 content-script.js:355:764 Partitioned cookie or storage access was provided to “https://js.stripe.com/v3/controller-with-dual-preconnect-control-df65ae77408499d8fc304928715040df.html#shared_params[version]=v3&shared_params[light_experiment_assignments]=%7B%22token%22%3A%224e4968ea-73f7-47a2-9dcf-d86e8dfa0ea2%22%2C%22assignments%22%3A%7B%22link_controller_preconnect_merchant_ui_api%22%3A%22control%22%2C%22link_skip_autofill_modal_mount%22%3A%22treatment%22%2C%22link_skip_wallets_link_never%22%3A%22treatment%22%7D%7D&apiKey=pk_live_E6Z6xPM8pEsJziHW905zpAvF&stripeJsId=4e4968ea-73f7-47a2-9dcf-d86e8dfa0ea2&stripeObjId=sobj-4cb0df44-4164-4145-8b0f-b6534d5fa943&firstStripeInstanceCreatedLatency=8&controllerCount=1&isCheckout=false&stripeJsLoadTime=1763001483441&manualBrowserDeprecationRollout=false&mids[guid]=NA&mids[muid]=acbe8abf-73d5-4329-83e5-9b276a691100360833&mids[sid]=3357b278-d2fc-4f7e-95f1-c78e016d0a001dd066&referrer=https%3A%2F%2Fwww.freecodecamp.org%2Flearn%2Ffull-stack-developer%2Flab-random-background-color-changer%2Fdebug-a-random-background-color-changer&controllerId=__privateStripeController2491” because it is loaded in the third-party context and dynamic state partitioning is enabled. controller-with-dual-preconnect-control-58ec61b3ec3e53f9244eb7622d923b53.js:1:162852 Partitioned cookie or storage access was provided to “https://js.stripe.com/v3/m-outer-3437aaddcdf6922d623e172c2d6f9278.html#url=https%3A%2F%2Fwww.freecodecamp.org%2Flearn%2Ffull-stack-developer%2Flab-random-background-color-changer%2Fdebug-a-random-background-color-changer&title=&referrer=&muid=acbe8abf-73d5-4329-83e5-9b276a691100360833&sid=3357b278-d2fc-4f7e-95f1-c78e016d0a001dd066&version=6&preview=false&shared_params[version]=v3” because it is loaded in the third-party context and dynamic state partitioning is enabled. content-script.js:115:878 progress updates processed where possible failed-updates-epic.js:92:29 Partitioned cookie or storage access was provided to “<URL>[version]=v3” because it is loaded in the third-party context and dynamic state partitioning is enabled. 3 Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://qmjyl5wyti-dsn.algolia.net/1/indexes/*/queries?x-algolia-agent=Algolia%20for%20JavaScript%20(4.22.1)%3B%20Browser%20(lite)%3B%20instantsearch.js%20(4.75.3)%3B%20react%20(17.0.2)%3B%20react-instantsearch%20(7.13.6)%3B%20react-instantsearch-core%20(7.13.6)%3B%20JS%20Helper%20(3.22.5)&x-algolia-api-key=f91afff73d62604d4df9ae9046e8ca23&x-algolia-application-id=QMJYL5WYTI queries Error: Not allowed to define cross-origin object as property on [Object] or [Array] XrayWrapper 3 content-script.js:355:764 A plugin named "loopProtection" is already registered, it will be overridden babel.js:105940:15 A plugin named "testLoopProtection" is already registered, it will be overridden babel.js:105940:15 Cookie warnings 2 The resource at “https://www.freecodecamp.org/static/Lato-Regular-77ca2742388f408c3be7d0ec3e7dc392.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. debug-a-random-background-color-changer The resource at “https://www.freecodecamp.org/static/Lato-Light-91308c0216b40aad16036f1394b98237.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. debug-a-random-background-color-changer The resource at “https://www.freecodecamp.org/static/Lato-Bold-ba3a83adcb94357fc42f762985e4d3df.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. debug-a-random-background-color-changer The resource at “https://www.freecodecamp.org/static/Hack-ZeroSlash-Regular-f67447de5dc6604f538786bd55ac6019.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. debug-a-random-background-color-changer The resource at “https://www.freecodecamp.org/static/Hack-ZeroSlash-Bold-c8ea19a8461596cf1a6a2ad08bebcf8e.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. debug-a-random-background-color-changer The resource at “https://www.freecodecamp.org/static/Hack-ZeroSlash-Italic-678bc16b550480d5a3c5c76dbf8c5fb9.woff” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
Thanks! I can confirm it. Looks like troubles start when the most right button starts to be covered by the middle div in the action row.
Thank you for making it clearer. I just wanted to note though that this issue seems to be present in most if not all labs.