Webkit scrollbar different for different phone brands

HTML & CSS
1

Hi have the following:

`::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}`

Appears ok on Samsung A7 on any box that has more content than is visible
but on Huawei Honor 6X only appears when you try to scroll - so no indication that there is more content than is visible.
Any solution for this, any help much appreciated
Thanks

2

[off-topic]
Hey @rambleon when you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.

I have done it for you this time.
[/off-topic]

3

The code you are using is webkit only and I believe the Huawei is android so the code won’t apply.

Styling scrollbars is not fully implemented at the moment although I believe Firefox now has some support. Have a look at the last demo in this CSS tricks article that shows some styling for scrollbars for webkit and Firefox.

Whether it is supported on the device of your choice is another matter and generally scrollbar appearance (and appearing) is usually at the discretion of the device.

I’m actually on a mac desktop and in Chrome there are no scrollbars on pages and they only appear when you focus on the page or start to scroll.

Of course on mobile devices everyone knows that they have to scroll vertically anyway and would not really need the indication of a vertical scrollbar. A problem can arise when you need to sideways scroll on a small device as its not always obvious there is more content. In most cases you can design the element so that its more obvious there is more content to the side or provide some clue such as showing cut off content or gradually faded out content.

4

Thanks for this Paul,
Samsung also uses the android os so don’t understand when you say
“Huawei is android so the code won’t apply.”
Would changing browser help?
Thanks

5

The default browser on iphones is webkit based (ios) but I believe Android machines do not use webkit as a default (was gecko but I’m not an Android expert) although you may be able to use a different browser on those devices that is webkit based (webview?). Even if they are webkit based they still may not support the webkit prefix and indeed may not support the newer css syntax either.

As I have said many times in the forums when you use prefixes you are taking a risk as they are non standard properties and may not be fully supported. You also take a risk when you use the latest official properties as they will not be immediately implemented in some devices. Indeed you may have to wait years in some cases.

So my answer to your question is that I do not think it is possible to do what you want across all devices.

Your job as a designer would be to anticipate this and design your elements as I mentioned above so that by their very design a user could see that they need to scroll.

I do see this quite often on my Mac desktop where there are scrollable elements (without visible scrollbars) that I did not know could be scrolled because they were badly designed. On my mobile I tend to scroll up and down on everything so seldom miss a scrollbox without scrollbar.

Sorry but I don’t see an easy solution to this.:frowning:

Note that the new scrollbar properties I mentioned above do have support in Firefox for Android so may be of use.

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.