- Share full article
Advertisement
Supported by
Solving the Case of the Mac’s Disappearing Scroll Bars
By J. D. Biersdorfer
- Feb. 2, 2017
Q. I recently switched to a Mac laptop, and the Safari browser confuses me. Sometimes it has scroll bars on the side of the page, and sometimes it doesn’t. Why is this?
A. In an attempt to streamline the user interface, Apple’s Safari browser for the Mac has scroll bars that can disappear from view if you are not actively scrolling through a web page. The company has been tinkering with desktop scrolling behavior for several years , and Safari’s behavior on the Mac is similar to the way it behaves in Apple’s iOS mobile operating system.
Scroll bars that disappear until they are needed make more sense on a mobile device with limited screen space than they do on a bigger screen navigated by mouse or track pad. Fortunately, you can change the scroll bar behavior for your programs in the Mac’s system preferences.
Click the System Preferences icon in the Mac’s desktop dock , or go to the Apple Menu and choose System Preferences. When the System Preferences box opens, click the General icon in the top row.
In the General box , go to the “Show scroll bars” section and click the button next to Always. Additionally, you can change what happens when you click in a scroll bar too, either jumping to the next page or to the area of the page where you clicked. (Before you close the preferences box, you can make other interface adjustments like changing the highlight color and increasing the sidebar icon size, among other things.)
If you do not like Safari, you can download another Mac-friendly browser like Google Chrome , Mozilla Firefox , Opera or Vivaldi . In most newer browsers, you can even use a keyboard shortcut to roll through a page — tap the space bar to scroll down, or hold down the Shift key and tap the space bar to reverse direction.
Personal Tech invites questions about computer-based technology to [email protected] . This column will answer questions of general interest, but letters cannot be answered individually.
How to Make Your Smartphone Better
The process of backing up your smartphone has become so simplified that it takes just a few screen taps to keep copies of your photos, videos, and other files stashed securely in case of an emergency.
These days, smartphones include tools to help you more easily connect with the people you want to contact — and avoid those you don’t. Here are some tips .
Trying to spend less time on your phone? The “Do Not Disturb” mode can help you set boundaries and signal that it may take you a while to respond .
To comply with recent European regulations, Apple will make a switch to USB-C charging for its iPhones. Here is how to navigate the change .
Photo apps have been using A.I. for years to give you control over the look of your images. Here’s how to take advantage of that .
How to fix the invisible scrollbar issue in iOS browsers
The page scrollbar in web browsers serves a useful function: The vertical position of the scrollbar thumb tells the user where they are in the page (their scroll position), while the size (height) of the scrollbar thumb tells them roughly how long the page is. Because scrollbars are useful, they should be clearly visible.
On Apple’s platforms, most notably on iOS, the page scrollbar is placed inside the viewport and laid on top of web content. In some cases, this can result in a poor contrast between the scrollbar thumb and the page background beneath it. One website that has this problem is WebKit Blog . The page scrollbar on that website in iOS browsers is almost completely invisible.
I assure you that there is indeed a scrollbar present in the above screenshot, but don’t worry if you can’t spot it. Even a person with perfect vision could probably not say with certainty that they can see a scrollbar in that image. Let’s zoom in to take a closer look at this supposed scrollbar, and maybe we’ll manage to actually see it this time.
The contrast ratio between the scrollbar ( #fbfbfb ) and page background ( #f7f7f7 ) is 1.03:1. This is only a smidgen above the theoretical minimum of 1:1 (no contrast), which is what you get if you compare a color to itself. For all intents and purposes, the scrollbar is invisible.
The invisible scrollbar problem is not specific to iOS. It affects Apple’s other platforms as well. However, macOS users can fix this issue by setting the “Show scroll bars” option to “Always” in system settings (in the Appearance section), which causes the scrollbar to be placed in a separate “scrollbar gutter” outside of the viewport in the browser. There is no such option on iOS, so it’s up to the website to ensure that the page scrollbar is clearly visible.
Websites that are affected by the invisible scrollbar problem can fix this issue by adjusting how they apply CSS background colors to the page. In the future, it will be possible to fix this issue by coloring the scrollbar via the CSS scrollbar-color property, which currently isn’t supported in Safari. Apple has expressed support for this property , but the implementation in WebKit is blocked on a limitation in lower-level frameworks on Apple’s platforms.
Note that the non-standard CSS ::-webkit-scrollbar pseudo-elements are not supported on iOS, so they cannot be used as a fallback for the scrollbar-color property on that platform.
What is causing the invisible scrollbar
On WebKit Blog, the header and footer have a dark background, while the main content on the page has a light background. The website achieves this by applying a dark background color to the <body> element and a light background color to the <main> element.
Since the header and footer don’t have their own background color, they are transparent (in CSS, the background-color property defaults to the transparent value), so the <body> element’s dark background is visible through them, resulting in the following appearance:
The page scrollbar in web browsers on Apple’s platforms can have a light and dark appearance. The operating system automatically chooses the scrollbar appearance based on the background colors of the web page. Since WebKit Blog sets a dark background color on the <body> element, the system assumes that the page is mostly dark and chooses the light scrollbar appearance, resulting in an invisible scrollbar against the <main> element’s light background color.
How to fix this issue
The fix is rather simple. In order to get a dark scrollbar appearance, the page should avoid setting a dark background color on the <html> or <body> elements. In the case of WebKit Blog, the dark background color should be applied directly to the <header> and <footer> elements, while the light background color can be applied to the <main> element or the <body> element (either works).
I should note that this fix can affect the overscroll effect in some browsers. On WebKit blog, when the user scrolls to the top of the page, the overscroll animation creates an impression that the page header is being stretched. In Safari on macOS, this effect is preserved after applying the fix, but in Chrome it isn’t (I filed a Chromium issue for this).
Some people may see this as a (minor) degradation in aesthetics, but I think that an invisible scrollbar is a much bigger problem for users, and websites should prioritize usability over elegance.
Wanna learn CSS from a course?
FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.
Leave a Reply Cancel reply
Your email address will not be published. Required fields are marked *
Save my name, email, and website in this browser for the next time I comment.
iOS 14 and browser scroll bars (webkit)
Sheeeesh! really!?!?!?!
Does anyone have a solution for this, then? How can we implement a non-custom scroll on iOS?
We would like to show the scrollbar all the time as we have a scrollable table and touch inputs tend to select cells/rows of that table rather than allowing for a scroll.
How to fix Instagram not loading on Safari in my Mac?
Instagram pages will not load on safari for my iMac. I've tried everything.
Restarted my computer
Erased my website data
Private browsing
[Re-Titled by Moderator]
iMac 24″, macOS 13.0
Posted on Feb 28, 2024 9:37 AM
Posted on Feb 29, 2024 5:54 PM
I'm glad someone else is having this problem. For some reason a few days ago Instagram won't load my profile page or and other pages/searches, all I see is the home page. It would be good if I could find a solution. I've tried different browsers, removed cookies and re-booted my Mac all with no effect.
Similar questions
- Instagram.com not working properly with safari Instagram pages don't load properly with the latest Safari and latest OS X 12.5.1 Any else get this? 585 1
- iMac: some websites won't open in Safari after Big Sur 11.3 update I started a similar thread already and marked it "solved" because I was having the same issue on both my MacBook Air and my iMac running Big Sur 11.3. In Safari certain websites weren't opening, most notably is Facebook. The suggestion was made to reboot in Safe Mode and try the websites, and if they worked in Safe Mode, reboot and they should then work. This method worked for my MacBook Air (so I marked the last thread "solved" as I assumed wrongly that this would work with my iMac also), but it did not work for my iMac. So for the iMac I reinstalled the system (Big Sur 11.3), then, after realizing those websites still didn't work, I again rebooted in Safe Mode, and they still didn't open. Strange because they work fine in Opera. Any suggestions? 454 2
- Page stuck on mobile site even in private mode For some reason my safari on the desktop is stuck loading github.com mobile site. I can't make it go back to the desktop site even when I change the user agent, or go in private mode. I've tried clearing history, cache, data, and rebooted many times. How do I fix this? Also, it's not a problem for other users on this mac. Also not a problem with other browser like Chrome. 360 1
Loading page content
Page content loaded
Feb 29, 2024 5:54 PM in response to krysta1996_
Mar 3, 2024 4:46 PM in response to krysta1996_
I can see the IG page (not black) but when I click on a post, it will not open, then a colored line appears at the top of the page. This does not happen on Google Chrome.
What's up??
Mar 3, 2024 8:32 PM in response to katharyn64
Has anyone found a solution?
Mar 1, 2024 6:04 AM in response to iamlahila
Hi Yes, my issue is that I can see the main page of instagram but can not load my profile, search or see any reels. I've tried different browsers, Safari, Firefox, Duck Duck Go all did the same. Google Chrome was the only browser that fully worked for me, which whilst it works I'd prefer to stay with Safari.
Mar 3, 2024 6:43 AM in response to krysta1996_
Same problem here, noticed at about the same time several days ago. I can access the main Instagram home page in safari, but can't do a next step like looking at any stories, my profile, etc. - it just hangs. I tried everything (clear cache, restart mac, restart router, etc.). It works fine on the Brave browser.
I'm using Safari 15.6.1 on Mac OS Catalina v10.15.7 on a MacBook Pro 15" (mid 2012).
Mar 2, 2024 2:14 PM in response to krysta1996_
It's a relief to know I'm not the only one. Have been going nuts the last 3 days trying all the prescribed fixes...nothing. I discovered it will work on Chrome, as someone else mentioned, but taking that extra step to use one app is not a long term solution.
Mar 3, 2024 9:57 PM in response to krysta1996_
I upgraded my OS, from Ventura to the current OS, Sonoma 14.3.1, and everything is now working perfectly. Odd to IG or anyone else hasn't mentioned the yet, as it would have eased some unneeded headaches.
Mar 4, 2024 6:52 AM in response to scorehead
Upgrading software is not an option on older Macs that are no longer supported.
Mar 3, 2024 5:00 PM in response to nancyfromanderson
Yep, I'm getting that colored line too whenever I try to open my profile or someone's story, profile, or hashtag search.
Mar 1, 2024 5:44 AM in response to krysta1996_
Same. Only JUST happened in the last few days. ONLY safari. No issue in Firefox. This has happened before with Safari, randomly dropped off for maybe a week and then came back online. I can see main wall page with menus down the side and suggested etc, inbox is fine, but my profile doesn't show.. nor do any stories load via my mac. Actually, via my iphone the last three days has been problematic with stories too. And quite glitchy in business page backend in the "followers" "who liked your posts" "verified" tabs too. I bet there's more changes ahead that's glitching everything yet AGAIN. Yay.
Mar 2, 2024 2:29 PM in response to krysta1996_
Sometime between Feb. 23 & Feb 28 something happened. I was able to use IG no problem 2/23 then I was away for 5 days and upon return it was not working. Older Mac PowerBook running Catalina 10.15.7 and Safari 15.6.1. Very strange that there aren't more people asking about this. Was on the chat with Apple support yesterday but got disconnected when I rebooted routers. Cleared history, cache, checked network but nothing resolved the issue. iPhone is fine and newer MacBook Air is fine. Very annoying but I suppose first world problem so there's that.
Mar 4, 2024 4:33 PM in response to krysta1996_
The exact same thing is happening to me. Started with not being able to see my page or anyone else’s, but could see scroll my feed. Now I can’t even do that. If I go to instagram using safari, it just loads a blank white page with a pink insta icon in the middle.
Mar 12, 2024 9:06 AM in response to youarenot
Wow, yours is not old at all! C'mon Apple, fix Safari!
Mar 2, 2024 10:58 AM in response to DAAkers
LITERALLY SAME!! In the past few days nothing loads. No stories no searches. So odd. Glad I found this. Maybe it’s a glitch and they’ll fix it soon.
Mar 3, 2024 8:29 PM in response to krysta1996_
I've had the same issue, as well, where all that I can see is the IG home page, but then NO other page or profile will open up. In addition, I'm not even able to forward a page (say, a recipe that I've seen) to anyone. Is there a fix or has IG even acknowledged this? It's been like this for a few days now. So frustrating.
IMAGES
VIDEO
COMMENTS
Arrow key scrolling broken in Safari 16.5 (Ventura) As of recently, hitting arrow keys as described on this page: Keyboard shortcuts and gestures in Safari on Mac - Apple Support (UK) does not work as described on that page. That page says. as of now: > Scroll up, down, left or right: Press the arrow keys. However, pressing arrow keys does ...
If you are stoll having problems finding it, type "scroll" in the search box at the top right of the window, which should highlight every preference pane that involves scrolling, including "Gneral." If you still can't find it, in the popup list under the search box, choose "Scroll Bar Behavior." anapourva.
Click the System Preferences icon in the Mac's desktop dock, or go to the Apple Menu and choose System Preferences. When the System Preferences box opens, click the General icon in the top row ...
Some sites are coded to not show the scroll bar. In those cases, Setting the scroll bar to "Always" will not make it show. Also, if all content on the page is already showing, there will be no bar because there is no additional content. We hope that helps. safari 14.1 scroll bars invisible or completely missing. .
When having a fixed element that has overflow: auto or scroll contained in a body element that has overflow: hidden, in Safari 8.0.x the scroll bar is not visible, but the element still scrolls. In Firefox 41.0.x the scroll bar is visible. Here is a fiddle that shows the behavior.
Open Safari on your Mac. In the Menu Bar, click Safari. From the drop-down menu, click Settings. Click the Extensions tab at the top of the Settings window. Locate any of the extensions that are enabled. Click the corresponding checkbox next to the extensions or ad blockers to turn them off. Close and restart Safari.
For all intents and purposes, the scrollbar is invisible. Observe how the scrollbar "disappears" as soon as the user scrolls past the page header. The invisible scrollbar problem is not specific to iOS. It affects Apple's other platforms as well. However, macOS users can fix this issue by setting the "Show scroll bars" option to ...
Apple silicon. 1.) Shut down your Mac. 2.) Turn on your Mac and continue to press and hold the power button until you see the startup options window. 3.) Select your startup disk, then press and hold the Shift key while clicking "Continue in Safe Mode.". 4.)
Participants 9. Hello! I have this scrollable container. It works fine across browsers and devices until it hits iOS14. Behaves just the way it should iOS 12 - (cant test iOS13 right now) The goal is to always show the scrollbar. On iOS14 only the native scrollbar is shown when scrolling is happening.
Since the last security update on Safari, often when I use the back arrow to return to a previous page, the scroll bar disappears. I have checked System Preferences and the 'always show scroll bar' option is selected. I'm using macOS Monterey version 12.7.1 and Safari version 17.1. Thanks.
Otherwise the scroll bar for up or down will not show and if I do not use it right away when it shows it will disappear again. It started shortly after I upgraded to Monterey 12.2.1 and was in Safari 15.3. 4932 6; Safari unusably choppy scrolling after upgrade to macOS 12.1 Hi, Ever since I upgraded to macOS 12.1, Safari (15.2) is basically ...
There is solution provided in above link which I have applied in my application. But this solution is not working in safari... can anyone please help? The scrollbar doesn't work in safari, when pointing at div but it scrolls when pointer is at scroll bar area.
Posted on Apr 12, 2020 9:47 AM. Try double clicking the Home button or swipe up from the bottom of the screen and swipe Safari upwards. Go to Settings/Safari and clear History and Website Data. Open Safari and test. Safari - Clear the history and cookies on your iPhone, iPad, or iPod touch.
My current style I am using is given below. width: 0.5em; height: 4px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); margin: 0 40px; background-color: rgb(0, 0, 0); I'm having the same issue - scrollbars on overflow:auto divs are gone. Nothing I try brings them back, and all demos I find also show no scrollbars.
First of all, it does not work in my Firefox 47 (Windows 10 x86_64). Second, as much as many of us would like to expect that the rendering of things like select elements only is done using CSS rules, it is not so and different browsers render them differently -- there is no cross browser requirement as to how select elements should be rendered exactly.
2. I've created a custom scrollbar and it seems to work fine on Desktop (Chrome) and Android (Chrome) but once I try it in iOS Safari it doesn't seem to behave. The arrows are non-clickable and if I want to drag the actual scrollbar it goes the opposite way for some reason. :|. css. scrollbar. asked Mar 7, 2017 at 11:36.
Same problem here, noticed at about the same time several days ago. I can access the main Instagram home page in safari, but can't do a next step like looking at any stories, my profile, etc. - it just hangs. I tried everything (clear cache, restart mac, restart router, etc.). It works fine on the Brave browser.
I'm facing some problems to add scrollbar color on safari 14. The webkit works in chrome and edge, but not in safari. There are some threads saying that safari isn't supporting webkit, but if that's true, is there a way to add the color to the scrollbar? example from w3schools.com, width: 10px; background: #f1f1f1;
I have this scrollable div and inside i have an SVG with points that has id's given. i want to align the selected point to the centre of the div and i have this solution document.getElementById("
This code working for all other browsers, but right space is not symmetrical on Safari browsers, but everything ok on other browsers. I know that this property is not supported on Safari and I searching for solution.