freeCodeCamp: Weird Behavior with long code blocks in instructions

I don’t think we can override the settings in the OS. Correct me if I’m wrong, but the article that @moT01 gave you to fix your problem seems to imply that it was an OS setting that was causing the scroll bar to disappear. In other words, it had nothing to do with the CSS on the page itself. Therefore, there is no way we can force a mac to always display a scroll bar if the mac is configured not to at the OS level.

Yeah, I understand the client-side part. Just wanted to see if there was a way to make it accessible for everyone. A lot of users are gonna be on Macs not knowing about that setting. Are there any ideas we have for accessibility?

@bbsmooth If we add this CSS to the codebase, does it make, even Macs with that setting checked, still always show? If it does, I say it’s worth implementing. Let me know what you think @moT01 too.

Just to be clear, FCC is accessible as far as this mac scroll bar issue is concerned. FCC is not doing anything to prevent the scroll bar from showing. There is nothing FCC can do to override an OS setting on a mac. In other words, this particular feature is accessible to everyone. Disabling the scroll bar through the OS does not make FCC less accessible.

What FCC could do to help people on macs who run into this problem is provide some documentation on how to fix it, such as providing a link to the article @moT01 gave us. I opened up an issue a while ago about creating some sort of help page (#49949) and that is probably where information like this would go.

I believe we should force the scrollbar behind the scenes so that everyone has access to it.

I think this had to do with your mac, not the coding on the page. The scrollbars are there for everyone. They just weren’t there for you because your mac was set up not to always show them. So I don’t think there is anything left to do here as there was no actual problem with the step.

Yes, I do. And I would just keep it in this issue but ill change the title since the discussion is all here.

I’m going to open a new issue for the unnecessary scrollbar. This issue is really about the disappearing scrollbar.

@moT01 I tried different browsers and I had the same issue. Attached is a video of me reproducing the issue. Basically, when it first loads I can scroll through using a trackpad but as soon as it loads the bar goes away and I can’t scroll unless I select everything by clicking and dragging to select.

In this video, I am on safari but the issue is the same on chrome in my experience.

Let me know if you experience this same behavior.

https://github.com/freeCodeCamp/freeCodeCamp/assets/48571264/4e6747a3-657b-409f-a89d-9f8f28b5f672

I was not able to reproduce the scroll bar not showing up. I tried a few of the lessons in this area with different scroll bars in a few different browsers. The scroll bar always showed up.

Do you have any browser extensions or settings that might be interfering or overriding anything @DylanDevelops? Have you tried another browser?

This wouldn’t be fixed in that PR. This would require a new PR that would fix this issue globally. Probably need to discuss it a little more to decide how exactly we want to fix this. It might not be quite as simple as it seems.

This is an accessibility issue as well. For text like this there should be no horizontal scrollbar. I was able to fix this by removing the white-space: pre property on the code element.