css

The Story

One of the applications we are working on requires a modal popup to show the Terms and Conditions after the user registered to the app. Initially, the Accept and Decline buttons are disabled. The user should read the Terms and Conditions first before he/she can click a button. The user has to scroll down to the bottom of the page before the buttons become enabled. Now, we know that the Terms and Conditions are quite long, so the browser will automatically show a scrollbar.

However, the scrollbar is hidden in Safari browser by default. You can only see it when you scroll down using a mouse or touching the screen of your device. This can lead to confusion if the user sees the Terms and Conditions popup, but not being able to click the Accept or Decline button.

Solution

1. Use CSS to override the default scrollbar’s styling and visibility

/* Override the default to keep the scrollbar always visible */

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #8f8f8f;
    -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.5);
}

2. Add a note at the bottom of the popup to inform the user to scrolldown to be able to read the full text.