Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

LogRocket blog logo

  • Product Management
  • Solve User-Reported Issues
  • Find Issues Faster
  • Optimize Conversion and Adoption
  • Start Monitoring for Free

Guide to styling CSS scrollbars

webkit scroll safari

The default browser scrollbar works fine in most cases. However, leaving it as is can make even the most beautiful websites look incomplete and unpolished. By styling the scrollbar, you can create a more visually appealing site that better aligns with your brand or design. In this tutorial, we’ll explore a few different ways to style CSS scrollbars.

Styling CSS Scrollbars Guide

Jump ahead:

Introduction to scrollbars

Styling scrollbars in chrome, edge, and safari, scrollbar pseudo-class selectors, styling scrollbars in firefox, styling scrollbars for more cross-browser support.

The scrollbar is a frequently overlooked element in web design. While it may seem like a small detail, it plays an essential role in website navigation. The default scrollbar is often dull and might look out of place, detracting from the overall aesthetics. Fortunately, you can easily customize the scrollbar using CSS. To do so, you’ll need to write two sets of CSS rules to cover Webkit browsers, like Chrome, Edge, Safari, and Firefox .

Before diving into the code, let’s make sure we understand the structure of a scrollbar. Knowing this is helpful when styling it with CSS because you can use different properties to target specific parts of the scrollbar. Below are the elements that make up a scrollbar:

  • Thumb: The movable part of the scrollbar that represents the current position of the content. It can be clicked and dragged to scroll the content up or down
  • Track: The area of the scrollbar that the thumb moves along. It represents the entire length of the content
  • Arrow buttons: Located at the top and bottom of the scrollbar track, the arrow buttons can be clicked to scroll the content
  • Scrollbar borders: The lines that surround the scrollbar element
  • Scrollbar corner: The intersection between the vertical and horizontal scrollbars when both are present

Webkit browsers allow scrollbar styling using pseudo-elements like :: -webkit-scrollbar , ::-webkit-scrollbar-button , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track , and more. Each of these targets different parts of the scrollbar, as listed above. The CodePen below shows an example of a styled scrollbar using the pseudo-elements above:

See the Pen webkit scrollbar style by Taminoturoko Briggs ( @tammibriggs ) on CodePen .

In the code above, we’ve displayed both the vertical and horizontal scrollbars, but in most cases, we’d only display one. To do so, we can modify the overflow property, which is responsible for the visibility of the scrollbar, to either overflow-x or overflow-y , depending on which axis we will display the scrollbar. However, for the example above, this wouldn’t be enough unless we make the image responsive by setting its width and height to 100% .

To create a more customized design, you can target specific elements of a scrollbar and apply styles to them by adding a pseudo-class to each pseudo-element . Below are some of the most common pseudo-classes:

  • :horizontal : Used to style the horizontal scrollbar differently from the vertical scrollbar. For example, you can set a different width or color for the horizontal scrollbar
  • :vertical : Used to style the vertical scrollbar differently from the horizontal scrollbar
  • :decrement : Applies to the arrow buttons at the beginning of the scrollbar. It is used to style the decrement button or the up arrow for a vertical scrollbar and the left arrow for a horizontal scrollbar
  • :increment : Applies to the arrow button at the end of the scrollbar. It is used to style the increment button or the down arrow for a vertical scrollbar and the right arrow for a horizontal scrollbar
  • :start : Applies to the first buttons and first track piece of the scrollbar, which are at the top or left side of a vertical or horizontal scrollbar, respectively
  • :end : Applies to the last track piece of the scrollbar, which are at the bottom or right side of a vertical or horizontal scrollbar, respectively

Below is an example that uses all the pseudo-classes above except :horizontal to give the vertical scrollbar a different look:

See the Pen webkit scrollbar vertical pseudo-class by Taminoturoko Briggs ( @tammibriggs ) on CodePen .

The example below uses the :horizontal pseudo-class to insert a shadow onto the horizontal scrollbar’s track:

See the Pen webkit scrollbar horizontal pseudo-class by Taminoturoko Briggs ( @tammibriggs ) on CodePen .

While the Webkit specifications for styling a scrollbar work fine at the time of writing, W3C has officially abandoned this specification and it is expected to be phased out gradually.

Firefox doesn’t offer any advanced styling methods like the Webkit browsers. At the time of writing, only scrollbar-width and scrollbar-color are available, which is the standard as specified by W3C CSS Scrollbars . These properties can be used to style a scrollbar’s width, thumb, and track color:

When styling a scrollbar, combining the Webkit and W3C CSS Scrollbars specifications is recommended to cover more browsers:

In WebKit browsers, rules that aren’t recognized will be ignored, and the browsers will apply the -webkit-scrollbar rules. On the other hand, in Firefox browsers, rules that aren’t recognized will be ignored as well, and the browsers will apply the CSS scrollbars rules. Therefore, the scrollbar will retain its styling in more browsers. Although the downside is that there are no advanced styling methods in Firebox like in Webkit, you might be able to style the scrollbars to look exactly the same.

Styling a scrollbar makes a site look more polished. It can also help differentiate a brand or product by incorporating its color scheme or logo into the scrollbar design. However, it is recommended not to style your scrollbar too far from its original look and feel so as not to make it unfamiliar to users and reduce the user experience. I hope you enjoyed this article, and be sure to leave a comment if you have any questions. Happy coding!

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket .

LogRocket Dashboard Free Trial Banner

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — start monitoring for free .

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Facebook (Opens in new window)

webkit scroll safari

Stop guessing about your digital experience with LogRocket

Recent posts:.

Integrating Next Js And Signalr For Enhanced Real Time Web App Capabilities

Integrating Next.js and SignalR to build real-time web apps

In this tutorial, you’ll learn how to integrate Next.js and SignalR to build an enhanced real-time web application.

webkit scroll safari

Exploring Tailwind Oxide

Tailwind Oxide was introduced to address common issues that exist with Tailwind CSS, such as the complex setup process.

webkit scroll safari

Exploring Catalyst, Tailwind’s UI kit for React

Tailwind’s Catalyst UI kit offers many features and customization options for React user interface development.

webkit scroll safari

Using react-to-print to generate a printable document

ReactToPrint is a great tool for easily adding a print feature to your React app while preserving your document’s neat, consistent look.

webkit scroll safari

Leave a Reply Cancel reply

  • Skip to main content
  • Skip to search
  • Skip to select language
  • Sign up for free
  • English (US)

-webkit-prefixed CSS extensions

User agents based on WebKit or Blink, such as Safari and Chrome, support several special extensions to CSS . These extensions are prefixed with -webkit- .

-webkit-prefixed properties without standard equivalents

Note: Avoid using on websites. These properties will only work in WebKit- or Blink-based browsers except where specified.

  • -webkit-app-region
  • -webkit-border-horizontal-spacing
  • -webkit-border-vertical-spacing
  • -webkit-box-reflect (supported with -webkit- by every browser, for compatibility reasons)
  • -webkit-column-axis
  • -webkit-column-progression
  • -webkit-cursor-visibility
  • -webkit-font-smoothing
  • -webkit-hyphenate-limit-after
  • -webkit-hyphenate-limit-before
  • -webkit-hyphenate-limit-lines
  • -webkit-line-align
  • -webkit-line-box-contain
  • -webkit-line-clamp
  • -webkit-line-grid
  • -webkit-line-snap
  • -webkit-locale
  • -webkit-logical-height
  • -webkit-logical-width
  • -webkit-margin-after
  • -webkit-margin-before
  • -webkit-mask-attachment
  • -webkit-mask-box-image-outset
  • -webkit-mask-box-image-repeat
  • -webkit-mask-box-image-slice
  • -webkit-mask-box-image-source
  • -webkit-mask-box-image-width
  • -webkit-mask-box-image
  • -webkit-mask-composite
  • -webkit-mask-position-x (supported with -webkit- by every browser, for compatibility reasons)
  • -webkit-mask-position-y (supported with -webkit- by every browser, for compatibility reasons)
  • -webkit-mask-repeat-x (also supported without prefix)
  • -webkit-mask-repeat-y (also supported without prefix)
  • -webkit-mask-source-type
  • -webkit-max-logical-height
  • -webkit-max-logical-width
  • -webkit-min-logical-height
  • -webkit-min-logical-width
  • -webkit-nbsp-mode
  • -webkit-perspective-origin-x
  • -webkit-perspective-origin-y
  • -webkit-rtl-ordering
  • -webkit-tap-highlight-color
  • -webkit-text-decoration-skip
  • -webkit-text-decorations-in-effect
  • -webkit-text-fill-color
  • -webkit-text-security
  • -webkit-text-stroke-color
  • -webkit-text-stroke-width
  • -webkit-text-stroke
  • -webkit-text-zoom
  • -webkit-touch-callout
  • -webkit-transform-origin-x
  • -webkit-transform-origin-y
  • -webkit-transform-origin-z
  • -webkit-user-drag
  • -webkit-user-modify

-webkit-prefixed properties with standard equivalents

Several old -webkit- prefixed properties have standard equivalents. Even if the name and syntax may be different, they shouldn't be used anymore at all.

For each of them, use the standard equivalent provided.

Use the standard border-block-end property instead.

Use the standard border-block-end-color property instead.

Use the standard border-block-end-style property instead.

Use the standard border-block-end-width property instead.

Use the standard border-block-start property instead.

Use the standard border-block-start-color property instead.

Use the standard border-block-start-style property instead.

Use the standard border-block-start-width property instead.

Use the standard border-inline-end property instead.

Use the standard border-inline-end-color property instead.

Use the standard border-inline-end-style property instead.

Use the standard border-inline-end-width property instead.

Use the standard border-inline-start property instead.

Use the standard border-inline-start-color property instead.

Use the standard border-inline-start-style property instead.

Use the standard border-inline-start-width property instead.

Use the CSS flexible box layout with the standard align-items property instead.

Use the CSS flexible box layout with the standard flex-direction property instead.

Use the CSS flexible box layout with the standard flex-basis , flex-grow , and flex-shrink properties instead.

Use the CSS flexible box layout with the standard flex-grow property instead.

Use the CSS flexible box layout with the standard flex-flow property instead.

Use the CSS flexible box layout with the standard order property instead.

Use the CSS flexible box layout with the standard justify-content property instead.

Use the CSS multicolumn layout with the standard break-after property instead.

Use the CSS multicolumn layout with the standard break-before property instead.

Use the CSS multicolumn layout with the standard break-inside property instead.

Use the standard hyphenate-character property instead.

Use the standard initial-letter property instead.

Use the standard margin-block-end property instead.

Use the standard margin-block-start property instead.

Use the standard padding-block-end property instead.

Use the standard padding-block-start property instead.

Use the standard padding-inline-end property instead.

Use the standard padding-inline-start property instead.

Pseudo-classes

  • :-webkit-animating-full-screen-transition
  • :-webkit-any()
  • :-webkit-any-link *
  • :-webkit-autofill
  • :-webkit-autofill-strong-password
  • :-webkit-drag
  • :-webkit-full-page-media
  • :-webkit-full-screen *
  • :-webkit-full-screen-ancestor
  • :-webkit-full-screen-document
  • :-webkit-full-screen-controls-hidden

* Now standard.

Note: If there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid.

Pseudo-elements

For web-compatibility reasons, Blink, WebKit, and Gecko browsers treat all pseudo-elements starting with ::-webkit- as valid.

  • ::-webkit-file-upload-button *
  • ::-webkit-inner-spin-button
  • ::-webkit-input-placeholder
  • ::-webkit-meter-bar
  • ::-webkit-meter-even-less-good-value
  • ::-webkit-meter-inner-element
  • ::-webkit-meter-optimum-value
  • ::-webkit-meter-suboptimum-value
  • ::-webkit-progress-bar
  • ::-webkit-progress-inner-element
  • ::-webkit-progress-value
  • ::-webkit-search-cancel-button
  • ::-webkit-search-results-button
  • ::-webkit-slider-runnable-track
  • ::-webkit-slider-thumb

Note: Generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix, As of Firefox 63, Blink, WebKit and Gecko browsers assume it is valid, not invalidating the selector list.

Media features

  • -webkit-animation
  • -webkit-device-pixel-ratio
  • -webkit-transform-2d
  • -webkit-transform-3d
  • -webkit-transition
  • Vendor Prefix glossary entry
  • Mozilla vendor-prefixed CSS extensions
  • Styling Form Controls on the WebKit Trac

Orangeable

Styling Scrollbars with CSS in Most Modern Browsers

CSS icon

The CSS scrollbar property is not standard.  Chrome, Safari, and Microsoft Edge use the WebKit engine with the -webkit-scrollbar prefix pseudo-element for styling scrollbars.  Firefox also allows styling with a few options, including scrollbar width and color.

Below, we'll talk about how to create custom CSS scrollbars for your website using rules for WebKit browsers, namely Google Chrome and Microsoft Edge.

  • What is a Scrollbar?

Most websites today include more content than can fit in the client area of a browser window.

A scrollbar is a graphical tool that allows users to navigate web page's contents in their entirety.

There are two types of scrollbars:

  • Vertical scrollbars :  Used to navigate up and down on your web page.  This is the most common type of scrollbar used on web pages.
  • Horizontal scrollbars :  Used to navigate left and right on your web page.  Not very common unless your pages navigate sideways instead of up and down.  This can be confusing in a lot of cases and doesn't work well for responsive design and mobile user experiences.

Scrollbars can either be controlled by clicking and dragging with your mouse cursor, rotating your mouse wheel, or with the up and down arrows on your keyboard.

Scrollbars are not limited to just the browser's client area.  Tables, div's, and other HTML elements can contain scrollbars for navigation within their content areas, as well!
  • Styling Scrollbars with CSS

This can be accomplished by using a set of pseudo-elements. There are many combinations of pseudo-elements, selectors, and properties you can define to customize them any way you want.

The best part is it's extremely easy once you get the hang of all the different parts that make up a scrollbar, and you won't have to create any additional HTML code containing scrollbar elements for these CSS rules to work since they're actually part of the browser window, not the web page.

The scrollbars are displayed according to whatever CSS properties you set for them. By default, the browser will show a scrollbar container on the right side of the browser window and will be disabled if the content doesn't stretch past the length of the screen.

Here's a graphical representation of the anatomy of a scrollbar:

Scrollbar anatomy

Now, let's dive into each of the pseudo-elements and their customization possibilities. As mentioned previously, this will work for Google Chrome and Microsoft Edge browsers.  This will also work in Safari desktop browsers with the -webkit prefix.  We'll discuss Firefox a bit later.

The below code samples will use the same CSS rules from the image you saw above so you can get a clear understanding of how the CSS pseudo-elements and properties tie together visually and written out.

  • Styling Scrollbars with ::-webkit-scrollbar

The entire scrollbar container. Here, you can determine the width of a vertical scrollbar container and height of a horizontal scrollbar container. You can define both sizes in a single definition:

  • Styling Scrollbar Buttons with ::-webkit-scrollbar-button

The buttons of the scrollbar. The scrollbar buttons are not shown by default in most modern browsers but are something you can add for extra navigation control. The user can click one of these buttons to move a small amount of pixels up or down the screen.

The buttons were a feature more prominently used in the old days of internet browsing. Scrolling is more easily accomplished with the scroll wheel on your mouse nowadays, but the option is still available for websites that wish to show the extra controls.

You can either configure the buttons to display a single up and down button in the scrollbar: The up button above the scrollbar thumb, and the down button below it:

Or you can customize to have the up and down buttons grouped together, once above the scrollbar track, and once below it:

Additionally, you can add arrows to your scrollbar buttons so users know how to navigate through your content. The below code snippet shows an example of how you can scroll using an up and down button in a vertical scrollbar using simple CSS definitions:

Each of the values in the border-color property represents a side of the button in which you want to show a different color. Square buttons will show a triangular arrow if you specify a color in a single side, like in the code sample above.

  • Styling Scrollbar Thumbs with ::-webkit-scrollbar-thumb

The draggable scrolling handle. If you click and hold this handle with your mouse cursor, you can drag the scrollbar thumb up and down in a vertical scrollbar, or left and right in a horizontal scrollbar, and the page will scroll with the movement of your mouse. Releasing the mouse button will stop the scroll animation.

  • Styling Scrollbar Tracks with ::-webkit-scrollbar-track

The track of the scrollbar. This acts as a progress bar, showing how far down, or across, in the web page you are.

In this portion of the scrollbar, we'll simply set the background color so we can differentiate the actual draggable scrollbar node from its background track:

  • Styling Scrollbar Track Pieces with ::-webkit-scrollbar-track-piece

The part of the track that's not covered by the thumb. I generally set this to the same color as the web page like the code snippet below. But it's your site that you're building, so play around with this and do what's best for your design aesthetic.

  • Styling Scrollbar Corners with ::-webkit-scrollbar-corner

The bottom-right corner of the scrollbar, where both vertical and horizontal scrollbars meet.

Since I generally don't allow horizontal navigation on any of my websites (I just feel it's bad design practice to do so), I generally hide this from view. But you can also set it to any background color you like:

  • The Resizer Pseudo-Element: ::-webkit-resizer

The draggable resizing handle that appears in the bottom-right corner of some elements, like textarea elements. The styling for this works similarly to the ::-webkit-scrollbar-corner pseudo-element, so the same example above should work here, as well.

  • Scrollbar Pseudo-Class Selectors

You can dive deeper into each of the pseudo-elements rules by adding additional pseudo-class selectors. We used a few of these in the examples above, so let's break down each of the options available:

  • :horizontal - CSS rules defined in this pseudo-class will apply to any scrollbar features that contain a horizontal orientation.
  • :vertical - CSS rules defined in this selector will apply to any scrollbar features that contain a vertical orientation.
  • :decrement - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the view's position will be decremented (up on a vertical scrollbar, and left on a horizontal scrollbar).
  • :increment - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the view's position will be incremented (down on a vertical scrollbar, and right on a horizontal scrollbar).
  • :start - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the objects will be placed before the scrollbar thumb.
  • :end - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not the objects will be placed after the scrollbar thumb.
  • :single-button - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not a single button will appear above and below the scrollbar track. Up and down buttons for vertical scrollbars and left and right buttons for horizontal scrollbars.
  • :double-button - This pseudo-class applies to scrollbar buttons and track pieces and indicates whether or not a group of buttons will appear above and below the scrollbar track. Up and down buttons for vertical scrollbars and left and right buttons for horizontal scrollbars.
  • :no-button - This pseudo-class applies to scrollbar track pieces only and indicates whether or not buttons will appear above, below, or next to the scrollbar track, depending on the scrollbar's orientation.
  • :corner-present - This pseudo-class indicates whether or not the scrollbar corner will be present.
  • Styling Scrollbars in Firefox

Firefox doesn't have any advanced styling methods like Google Chrome or Microsoft Edge browsers.  However, you're still able to customize scrollbar width, as well as thumb and track color.

  • scrollbar-width : Sets the width of the scrollbar.  The default vault is auto .  You can also set this to thin for a much thinner (almost invisible) scrollbar.
  • scrollbar-color : Here, you set two hexadecimal color values.  The first value is the scrollbar thumb color, and the second value is the scrollbar track color.

Here's an example showing the two properties in action.

Note that the properties are wrapped in an html element selector. This is standard for Firefox scrollbar styling. If you want to styling specific elements with a horizontal or vertical overflow, then you can do so by changing the element selector to your liking.
  • Hiding Scrollbars with CSS

You can also hide a browser window or child container's scrollbars with either of the following CSS rules:

overflow-x hides the horizontal scrollbar and overflow-y hides the vertical scrollbar.

To hide both vertical and horizontal scrollbars within a container with only one line of code, you can use the overflow property:

In this example, you've learned how to style scrollbars using CSS with a variety of different examples broken down into each piece of the scrollbar element.

Experiment and have fun with it! There are a lot of different styling methods you can use for scrollbars with CSS, and playing around with the different pseudo-classes, selectors, properties calls for a whole new level of excitement with CSS.

Share on Twitter

Daniel Porrey

Add a comment, table of contents.

The Ultimate Managed Hosting Platform

Custom Scrollbars in WebKit

Avatar of Chris Coyier

Way back in the day, you could customize scrollbars in IE (e.g. v5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the <body> ) and do totally rad things . IE dropped that.

These days, customizing scrollbars is back, but it’s WebKit this time. It’s a bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar ) and use the “ Shadow DOM “. This has been around for a couple of years. David Hyatt blogged it in early 2009.

The Different Pieces

These are the pseudo-elements themselves. The actual parts of the scrollbars.

webkit scroll safari

The Different States

These are the pseudo-class selectors. They allow for more specific selection of the parts, like when the scrollbar is in different states.

I’m going to steal this whole section from David’s blog post on the WebKit blog because it explains each part well:

:horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation. :vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation. :decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar). :increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar). :start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb. :end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb. :double-button – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons. :single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button. :no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track. :corner-present – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present. :window-inactive – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)

All together now

These pseudo elements and pseudo class selectors work together. Here are some random examples:

Very Simple Example

To make a really simple custom scrollbar we could do this:

In which we’d get this on a simple div with vertically overflowing text:

webkit scroll safari

In The Wild

Check out the very subtle and nice scrollbars on Tim Van Damme’s blog Maxvoltar ( Update September 2012 : Tim’s site no longer uses this design):

The particularly nice bit here is that the scrollbar is on the body element, yet the scrollbar isn’t stuck to the top, bottom, or right edge of the browser window as scroll bars normally are. I made a test page with copy-and-pasteable code to achieve that a similar effect:

On Forrst , they use custom scollbars on code snippets which are also pretty nice. They are less visually intense and so don’t fight as much with the code highlighting.

webkit scroll safari

  • Dion Almaer has a useful little “debug” page for scrollbars with all the parts in bold colors to see what’s what. (from this article )
  • Similar article on Beautiful Pixels.
  • Google Wave went kinda overboard with them back when that was still a thing.

Nice, but style.css … 404 ;)

Max Voltar websites works in Chrome. That is not the case for your example.

Same here with Chrome 10.

It works fine for me in Chrome 10.

Nice trick, definitely adds a nice touch for websites.

Works fine in Chrome mate.

What if I wanted to show custom scroll bars on non-webkit browsers?

You’d either:

1) Not. Or, 2) Google up some JavaScript based solution.

If your truly desperate Flash or JavaScript (somehow, but not any way that I know of).

I can’t replicate in Chrome 11 or Safari 5 mac.

I have used the plugin at the link below before, it works fairly well. Its not the method Chris uses above, but its a decent JS based plugin.

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Yet another timely article Chris!

The point about this not working in other non-webkit browsers is sadly true – I’ve recently spent quite a while trying to figure out a solution to this specifically for use within text areas.

There are a few javascript/jquery solutions out there and probably one of the best I’ve found was JScrollPane.

As for text area solutions I’m afraid I didn’t unearth too much but I’m determined to try and figure something out for that too!

Great post Chris, thanks a lot!

Rumor has it, OS X Lion coming out this year is supposed to get rid of the shiny liquid blue scroll bars in OS X anyway. They’re apparently adopting a flat, gray, iOS feel. Like you said, the blue “thumbs” really shout for attention. That’ll be a welcome improvement.

Your demo is broken in both Chrome and Safari OSX.

That’s because I’m an idiot. Fixed. Burying.

any hint on a possibility that this will become available on other browsers? even on IE i hope :)

IE supports styling the scrollbar for years already:

body { scrollbar-face-color: #eee; scrollbar-highlight-color: #fff; scrollbar-3dlight-color: #ccc; scrollbar-darkshadow-color: #fff; scrollbar-shadow-color: #aaa; scrollbar-arrow-color: #000000; scrollbar-track-color: #eee; }

source: http://www.computing.net/answers/webdevel/how-to-change-scroll-bar-look/740.html

Just the color though

Pity this type of overflow doesn’t work on iOS… any idea on how to enable touch events?

I’ve had the same problem, but figured out that @media querys can help.

@only screen and (max-device-width:480px){

//Insert your Scrollbar-CSS her //

Works for me.

Please delete that last comment. Must have been on crack or something

Or Chrome used a cached version.

Hi Chris, thanks for this, I really loved it and tried it in my project right away!

I hope -moz- comes after this soon, it can make the design more unique, I’d always wanted this and I saw a few flash scrolbars that was awesome in look but creepy in format, ha! but CSS3 is very exciting… and I would love to use it.

A couple of things I would like to point out…

As we know it doesn’t work properly until you put position: absolute; in the body section. If we do the right: 20px; it will look fine only for -webkit- browsers! If you see this in Mozilla for example, it will look non-standard and a bit confusing to the user… So I set the right: 0; to level things out. (If you know a better way please let me know, I like to have it 20px to the left)

Another thing is about the .body again, we better set top and bottom 0 in order to have the page full in height and replace it with margin in the: ::-webkit-scrollbar-track { margin: 20px 0; }

Is it me or you can’t use the mouse wheel in your example?

Mine works to scroll down, but not up.

Scratch that! It works Up but not Down.

How about fixing broken features in webkit rather than introducing new ones! i.e. the fact that the cursor style on an area tag is never honored in webkit..

sheess….

Is this broken? I haven’t seen any problems yet. I haven’t tried to do a ton of advanced stuff though. I’d think the most broken part is that isn’t a little unclear and undocumented about what properties the different parts will accept.

Regarding the area bug, I hadn’t heard of that, but does sound buggy. Best thing to do of course, is to create a reduced test case and submit as a bug ( http://www.webkit.org/quality/reporting.html ) If it’s already been reported, submitting your test case will still be helpful in that it’s all the more material to test and registers more interest in the problem.

Here’s a good collection of premade scrollbars . One looks like the iTunes scrollbars (marble) and the other is basically just a dark version of that. The download links are broken, but I found the actual downloads. Marble Black .

Don’t forget Opera that can do some tweaks to scrollbars since many years as well. I used it on my website, 6 years ago.

scrollbar-face-color: scrollbar-highligh-color: scrollbar-shadow-color: scrollbar-3dlight-color: scrollbar-arrow-color: scrollbar-track-color: scrollbar-darkshadow-color:

Not as good as the implementation of Webkit but then, if you want to play with it.

Is it possible to place an image on the scroll bar?

I’ve used Malihu’s jquery plugin on this website http://bitteart.dk/ to horizontally scroll a client’s gallery. It works pretty well in all modern browsers (I didn’t check in old browsers).

Plugin page: http://manos.malihu.gr/jquery-custom-content-scroller

This is very old method…

Here is the new one and also customize your own scrollbars… http://www.hesido.com/web.php?page=customscrollbar

wow nice tuts never tought it easy as find here .. :)

Wth is wrong with this website? All text is unreadable in all my browsers. Please use a proper font, or at least fallback to something readable.

Hi, may i say something : there are usually some really good stuff with css3 but it’s usually the same : only webkit or ‘only’ mozilla, like text-transform or the scrollbar custom here. So, what do we’re supposed to do with it, wait for 2 years that the concept arrives in every browser…? thanks for the tip anyway, good stuff…for webkit browsers

Ones again you amaze me with your findings and tutorials.. thanks for a great website Chris

Webkit scrollers was a part of my personal blog since mid-2010 (I removed it few time back). Nice article Chris.

Can’t get it to work on FF4, the example doesn’t work either

See title of article.

Thanks for the mention, Chris! If only every browser supported this stuff. In time, I suppose.

Oh god no. This could be the worst thing in webkit! Scrollbars are the same in every app… if you changed the look of them the average person wouldn’t have a clue what they were.

Could be terrible for usability.

Do you have any research on that?

I know what you mean. Standard looks are familiar to users, they’ve used them before, so they know how to use them again.

But these customizations aren’t totally reinventing the concept of a scroll bar. They still basically look like scrollbars if you do it right. I’d wager most users scroll with a mouse motion of some kind, in which case they’d see this custom scrollbar scroll and get it right away.

But now that’s just me speculating.

Yeah, was speculating too. The only thing I was going on was that changing user expectations has always proved to be a bad thing (only read that from nielsen’s papers).

Thing about a scroll wheel is that it scrolls depending on where your cursor is. If you don’t know that something has scrollable content a non-techy user could easily get annoyed at their mouse/trackpad.

What do you reckon?

Also, sorry mate, I didn’t mean to sound rude! It looks like a really cool trick for what it does, thanks for sharing!

I love the custom scrollbars but is there a way to resolve how the browser window must be clicked before the keyboard up/down arrays scroll the page? That is kind of a deal breaker.

I think these are really cool, especially the usage on Forrst on code examples, which to me look pretty ugly with Apple aqua scrollbars or something like that.

I have to agree with most of the commenters over at HN ( http://news.ycombinator.com/item?id=2513578 ) that styling scroll bars is usually a bad idea.

As “stuk” said over there: “The problem with allowing the customisation of scrollbars is that most people are going to make them worse.”

Great article, I been into web development with HTML and CSS for a year now, so Im pretty new to all this stuff but it feels nice having access to information like this one so well explained. As many said its a petty that this only works on webkit. Thank you Chris for the awesome stuff here!

This Is What I Have Been looking for over like 6 months, Thanks a lot… just one question how to i change the color from red to like a dark gray

Thanks, In Advanced

With this, “background-attachment: scroll” doesn’t work. It is because of “overflow-y: scroll” in the “body”… Any solution?

I just noticed that I can only use solid colors for the scrollbars in Chrome 11.0.696.65 on Mac. I had to remove all of the rgba calls for Chrome to function. Otherwise, made a semi-transparent hole in the browser that tried to render my desktop background… kind of strange.

There is also a bug in webkit whereby scrollbars won’t appear on an iframe: http://code.google.com/p/chromium/issues/detail?id=57292

If you are using any type of scroll event listener, be aware that once you style the scrollbar, it is removed from the normal webkit DOM and is no longer selectable via javascript (or jQuery) – at least, that’s what I have found thus far.

For example, comment out the -webkit-scrollbar styles in the demo and bind a scroll trace to window ::

$(window).scroll(function() { console.log($(window).scrollTop(),$(window).height()); });

Then un-comment the -webkit-scrollbar styles and you will find that the scroll event listener is no longer triggered. Changing the bind event to “body” will trigger the scroll event listener but scrollTop will be fixed to 0 and height will be fixed to the visible window’s height. I get similar results when I trace $(“html”).scrollTop(); or $(“body”).scrollTop(); from within the event.

Even though you can see (in the web inspector) that the scrollbar is attached to the html tag, I have not been able to find a valid selector with which to recapture these values. I even tried selecting the $(“::-webkit-scrollbar-track-piece”) object but alas, no.

hi, isn’t this kind of what everyone is looking for and is it workable in all browsers? The website is in french which means i can’t read it but the scroll bar works quite swell for such a small amount of code, and i haven’t used it so i can’t tell what its drawbacks would be . . . Anyone willing to take a look at it?

http://carotut.voila.net/tutoriel/scrollbar_en_images/index.htm

thats the link! do reply as I’m not using it till someone answers one or more of my queries above

Nice and clear solution thx

not working in firefox

See title of post.

Not working in firefox

SUPER AWESOME post! #thanks

Is it possible to overlay the scrollbar over content? The desired effect would be to fix the “shift” problem where some pages do not require a scrollbar. It would be nice if we could make the scrollbar sit on top of the “content” (actually just a blank gutter in my case) instead of pushing the site to the left.

http://aokp.co is a good example of this.

Hi friends, if I use this code ::-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); }

it get apply on all the scrollbars, how can i apply it to a particular div ??????

Hey, nice tutorial :-) But i’ve got a question: how do you realize this margin from your right border in your example (with the red scroll thumb)?

I tried using it at -webkit-scrollbar-thumb (with margin: 30px ), also at -webkit-scrollbar and body, but the scrollbar is everytime at right: 0px . Can you help me?

works only in chrome :(

buddy, so now how make custom scrollbars in FF and IE ??

Hey it’s working fine and cool :) How can reduce the thumb height?

hey its working in chrome only :( so how can i make custom scrollbars in firefox nd IE

It’s not working in firefox…

Burying, because this has already been covered. (See the title of the article).

webkit scroll safari

How TO - Custom Scrollbar

Learn how to create a custom scrollbar with CSS.

Custom Scrollbars

Note: Custom scrollbars are not supported in Firefox or in Edge, prior version 79.

How To Create Custom Scrollbars

Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar.

The following example creates a thin (10px wide) scrollbar, which has a grey track/bar color and a dark-grey (#888) handle:

This example creates a scrollbar with box shadow:

Scrollbar Selectors

For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar:

  • ::-webkit-scrollbar the scrollbar.
  • ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards).
  • ::-webkit-scrollbar-thumb the draggable scrolling handle.
  • ::-webkit-scrollbar-track the track (progress bar) of the scrollbar.
  • ::-webkit-scrollbar-track-piece the track (progress bar) NOT covered by the handle.
  • ::-webkit-scrollbar-corner the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
  • ::-webkit-resizer the draggable resizing handle that appears at the bottom corner of some elements.

Get Certified

COLOR PICKER

colorpicker

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

  • Español – América Latina
  • Português – Brasil
  • Tiếng Việt

Scrollbar styling

Use the scrollbar-width and scrollbar-color properties to style scrollbars.

Bramus

Introduction

From Chrome version 2 it's been possible to style scrollbars with the ::-webkit-scrollbar-* pseudo-elements . This approach works fine in Chrome and Safari, but was never standardized by the CSS Working Group.

What did get standardized are the scrollbar-width and scrollbar-color properties, part of the CSS Scrollbars Styling Module Level 1 Specification . These properties are supported as of Chrome 121.

Browser Support

Scrollbars 101

Anatomy of a scrollbar.

At the minimum a scrollbar consists of a track and a thumb. The track is the area in which the thumb can move. The track represents the entire scroll distance. The thumb represents the current position within the scrollable region. As you scroll, it moves within the track. The thumb is often also draggable.

Scrollbars can have more parts than just the thumb and track, though. For example, a scrollbar could have one or more buttons to increment or decrement the scroll offset. The parts that make up a scrollbar are determined by the underlying operating system.

Illustration of the parts that make up a scrollbar.

Classic and overlay scrollbars

Before looking at how to style scrollbars, it’s important to understand the distinction between two types of scrollbar.

Overlay scrollbars

Overlay scrollbars are floating scrollbars rendered on top of content underneath. They are not shown by default but only while you are actively scrolling. To keep the content underneath visible they are often semi-transparent, but that’s up to the operating system to decide. While interacting with them, their size may also vary.

Illustration of a browser with an overlay scrollbar.

Classic scrollbars

Classic scrollbars are scrollbars that are placed in a dedicated scrollbar gutter . The scrollbar gutter is the space between the inner border edge and the outer padding edge. These scrollbars are usually opaque (not transparent) and take away some space from the adjacent content.

Illustration of a browser with a classic scrollbar.

The scrollbar-color and scrollbar-width properties

Giving scrollbars color with scrollbar-color.

The scrollbar-color property lets you change the color scheme of scrollbars. The property accepts two <color> values. The first <color> value determines the color of the thumb, and the second one the color to use for the track.

When using an overlay scrollbar, the color of the track has no effect by default. However, upon hovering the scrollbar, the track will show.

To use the default rendering provided by the operating system, use auto as its value.

Changing the size of the scrollbar with scrollbar-width

The scrollbar-width property lets you choose a narrower scrollbar, or even to hide the scrollbar completely without affecting scrollability.

Accepted values are auto , thin , and none .

  • auto : The default scrollbar width as provided by the platform.
  • thin : A thin variant of scrollbar provided by the platform, or a custom scrollbar thinner than the default platform scrollbar.
  • none : Effectively hides the scrollbar. The element is still scrollable though.

It is not possible to use a <length> such as 16px as the value for scrollbar-width .

When using an overlay scrollbar, the thumb only gets drawn while you are actively scrolling the scrollable area.

Supporting older browser versions

To cater for browser versions that don’t support scrollbar-color and scrollbar-width , it’s possible to use both the new scrollbar-* and ::-webkit-scrollbar-* properties.

Note that when you set the width or height of ::-webkit-scrollbar , an overlay scrollbar is always displayed, effectively turning it into a classic scrollbar.

To keep the illusion, you can choose to only change the colors when hovering the scroller.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-01-17 UTC.

Get the most of your stay in Moscow

webkit scroll safari

TOP-11 Moscow Parks to Visit

I have chosen the best 11 Moscow parks to visit and spend a beautiful time for you. Do not miss and choose one that you like the most – cycling, festivals, flowers, panoramic views and many other things are waiting for you!

Gorky Park (The Central Park of Culture and Leisure) – The main one of the Moscow Parks

In my opinion this park could be called the main park of the city. Why? Because of its huge territory, the central location and the amount of people visiting the park daily.  It was founded in 1928 and in 2011 it was totally reconstructed. Now it pleases visitors with modern objects and soft green lawns.

  • Oktybrskaya or Park Kultuty metro station, Krimsky Val, 9

The Gorky park is a the right choice for everyone! The youth will like a free WiFi, bicycles, skateboards and other rentals; the couples will enjoy spending time near the river, watching a sunset; parents will appreciate colorful playgrounds and a room for mother and child. Everyone can find something for themselves: from yoga classes  to watching movies in a cozy summer cinema, from dance classes to volleyball playground. Gorky Park is also the venue for all kinds of exhibitions, festivals, events for children and adults. During the winter there is one of the biggest skating rinks in the park.

Museon Art Park – A Second Gorky they say

“Museon” is located on the opposite side of Krimsky Val street. And right now some people believe that Gorky and Museon together is a one space sharing the same beauty.

  • Oktybrskaya or Park Kultuty metro station, Krimsky Val, 2

The Park of Arts was named this way because there is the largest composition of open-air sculptures in Russia. In its territory there are already more than 1000 unique exhibits: from monuments of the socialist realism era to various kinds of contemporary art. But this is not all the attractions of the park. In recent years, “Museon” has become an important cultural site of the city. The park regularly hold many different concerts, festivals, educational projects in the field of art and design. There is a Central House of the Artist, a comfortable summer cinema and other attractions on territory. Be sure to stroll pedestrian Crimean embankment, which looks like a modern park.

Neskuchny Garden – True Russian Nature is Here

Neskuchny garden is located on the right bank of the Moscow River. Today it is also seen as a part of the Gorky Park. This landscape park is one of the oldest in the city and is protected by the state. Its name was received from the Neskuchnoye Estate of  Prince Trubetskoi which is still located in the park.

  • Leninsky Prospekt metro station, Leninsky Prospect, 30

This park is famous mostly for its location close to the Gorky park. It is a quite place with true nature, lots of trees and squirrels and also ancient architecture. As in every park, there are sports and playgrounds, cafes and even a football field.

Zaryadye Park – 5 Steps Away From The Red Square

The area of this brand new park was opened only in September 2017 and located in the very heart of Moscow – right near the Red Square.

  • Open from 10AM to 10PM
  • Teatralnaya, Okhotnyi ryad, Ploschad Revolutsii

The park has 4 zones, each of them represent different parts of Russian landscapes. Above the river there is a floating bridge from where you get to see one of the best panoramic views on Moscow. Other attractions of the park are 5D cinema where you can take a flight above Moscow, few cafes and restaurants, pretty lakes with fishes and old preserved churches. In addition there is still being built a  philharmonic hall, covered with a huge dome and an Ice cage where the temperature will always stay below zero degrees.

When you are on the Red Square do not miss it!

All-Russia Exhibition Center (VDNKh) – The Soviet Style Moscow Park

Park VDNKh – one of the most famous parks in Moscow. This park is one of the sights of the city as it hasn’t changed much since the Soviet era.

  • VDNKh metro station, Prospect Mira, 119

The symbol of VDNKh is a fountain with 16 women symbolizing the friendship of the nations of the USSR. Around this fountain there are all the pavilions representing 16 republics. Now inside the pavilions you find various shops, cafes and exhibitions. If you go deep inside the park you will find a rocket Vostok and and an aircraft. What is funny the inside of the aircraft there is actually a photo exhibition. Near the northern entrance you there is a famous sculpture “Worker and Kolkhoz Woman”. It is extremely famous among Russians as all the movies by Mosfilm corporation used to start with the picture of this statue. But if you go further inside the park you will reach a very calm area. A lake is there, forest and birds singing. Since the park occupies a large area I suggest you to rent a bicycle.

Sokolniki Park – A Place For A Hunt Or For Leisure?

The park got its name because of the royal falconry, which took place there in the past when there was a dense forest. (Sokol means a falcon.) In 2011 it was significantly transformed: updated lawns, landscaped ponds and picnic areas, restored summer cinema and theater, a large rose garden, sports grounds, bicycle paths and other things.

  • Sokolniki metro station, Sokolnichesky Val, 1, p. 1

From the main entrance along the alley you can walk to the Sokolniki circle, where 8 alleys form 9 sectors, in each of them you will find trees of the same breed.  The park is famous for its rosary, as well as flower decoration. On the territory of the park there are concert halls, a library, amusement zone, dances zone and many many other attractions. In winter the park has a skating rink (a free of charge one) and ski runs. During the warm season you can rent a bicycle.

Tsaritsino Park – A Different World Inside Moscow

Here you can walk for hours, admiring the most beautiful nature and magnificent architecture.

  • Open from 6AM to 12AM
  • Tsaritsyno metro station, Dolsky, 1

The most amazing part of the park is the lake with a light and musical fountain. Every evening the fountain starts the show. Lights and music combined make you feel like you are not in Moscow but in a fairy tale. The park is also well equipped for sports lovers and healthy lifestyle. There are volleyball and basketball courts, a tennis court, sports facilities for acrobatics, bodybuilding equipment.

What I personally like about this park is the atmosphere. This place is actually far from the city center but I love going there anyway. Whenever I go there I feel like I left Moscow with all its hectic lifestyle. It is the place where I relax, enjoy myself or a company of my friends and feel kind of different. By the way totally suggested for a date!

Kolomenskoye Park – Combination Of Reserve and Architecture

The Kolomenskoye park is actually a Museum-Reserve. It is a former residence of Russian tsars and one of the most scenic places in Moscow.

  • May to September – open from 8AM to 12AM, October to April – from 8AM to 9PM
  • Kolomenskoye metro station, Andropov Ave, 39

 Alike with Tsaritsino park Kolomenskoye park has its own special atmosphere with all the architecture, trees, ponds and even a river bank. The park regularly hosts various folk festivals and different fairs. In summer time you can play with kites or rent a bicycle and ride around the huge area of the park.

I love the view that you get on the city from one of the hills near the river. I love the apple trees alleys and the beautiful churches. It is also a bit far from the city center but yet worth going there. One of my best friends even celebrated her wedding there.

Aptekarsky Garden or Botanical garden of the Moscow State University – The Best Botanical Garden in The World

Aptekar in Russian language means a pharmacist so basically it is a pharmacist’s garden. It was founded in 1706 by Peter The Great for growing medicinal plants for the royal family. But later they moved it from under the walls of the Kremlin to the current location.

  • Open from 10AM to 8PM
  • Prospect Mira metro station, Prospekt Mira, 26

In the botanical garden there are no attractions and noisy crowds of tourists. The area of the garden is not as big as any other park in Moscow. And the entrance is not free. But this exactly what makes this park one of the most comfortable in the city. In the Aptekarsky garden they grow thousands of different plants, flowers and trees. Some of the trees are more than 300 years old. They held different festivals there: flowers festivals, sand and ice sculptures expositions.

For me it is one of the most beautiful parks not only in Moscow but in the world. I have never seen so many different flowers and plants anywhere else. And trust me I am a real park lover. And what is more the staff really takes care about every single tree or plant there, some of the trees have names and stories. I love it there and I think the price is really worth what you get.

Victory Park – A Park That Makes Us Remember The War

The park is located on the Poklonnaya Hill and it has one of the world’s largest memorial complexes dedicated to the World War II. The park was opened for the 50th anniversary of the Victory on May 9, 1995. It is also one of the main venues in the city for holding a variety of mass events.

  • Park Pobedy metro station, Brothers Fonchenko, 7

On the main avenue of the park there are with 1418 fountains – exactly as long as the war lasted. Fountains make five water terraces, symbolizing five years of military operations. And in the center of the park there is the Museum of the Great Patriotic War. If you are interested in the history of the war do not miss it. The Poklonnaya Hill is a part of the park and from the hill you get one of the best views on the city of Moscow. And I could say this is the best place for watching the fireworks during the mass celebrations. But be aware it gets too crowded then. As in most of the other big parks you can rent a bicycle or rollers there.

Izmailovsky Park – A Mix of a Big Forest and Attractions

Izmaylovsky Park occupies a huge green territory, making up a large part of the Izmailovo district. The park consists of two parts: Izmaylovsky Park of Culture and Rest and the forest park of Izmailovo. First part is full of attractions and restaurants while the second one is like a real forest with pine trees, birch groves, beautiful clearings and ponds.

  • Izmaylovskaya, Shosse Entuziastov or Partizanskaya metro stations, Izmaylovsky Park

It is easy to spend there a whole day. A large landscaped area and a lot of various entertainments for children and adults will help you not to get bored. An observation wheel, a boat station, children’s playgrounds, a dance floor, sports grounds, a skate park – all this is only a small part of the possible leisure activities. In the park there are bike paths and a rental services.

I don’t go there often to be honest. But the park is very very close whenever to a souvenir market on Partizanskaya metro station. And whenever the weather is nice and I have enough of free time I stroll through the alleys of the park and enjoy the nature. So if you are going to the souvenir market too and you have enough free time then do go to the park too.

5 thoughts on “TOP-11 Moscow Parks to Visit”

Pingback: Places to visit in Moscow – Sheran Bhattacharyya

' src=

Yes, sure 🙂 This is my top list 🙂

Yes, sure. These are my favorites!

' src=

I like this blog very much. Please keep sharing it in future too.

Thanks for sharing.

Thank you! 🙂

Leave a Comment Cancel Reply

Your email address will not be published. Required fields are marked *

2018 Primetime Emmy & James Beard Award Winner

R&K Insider

Join our newsletter to get exclusives on where our correspondents travel, what they eat, where they stay. Free to sign up.

A History of Moscow in 13 Dishes

Featured city guides.

The Best Way Yet to Measure Browser Performance">Speedometer 3.0: The Best Way Yet to Measure Browser Performance

Mar 11, 2024

by Ryosuke Niwa

As announced on browserbench.org today, in collaboration with other browser engine developers, Apple’s WebKit team is excited to introduce Speedometer 3.0 , a major update that better reflects the Web of today. It’s built together by the developers of all major browser engines: Blink, Gecko, and WebKit with hundreds of contributions from companies like Apple, Google, Intel, Microsoft, and Mozilla. This post is a deep dive into how the collaborative Speedometer project improved the benchmark’s measurements methods and test content.

To recap history, in 2014, the WebKit team at Apple released the Speedometer browser benchmark , designed to measure the responsiveness of websites and web apps.

The original Speedometer simulated user interactions in web applications, driving TodoMVC sample apps written using different JavaScript frameworks to add, complete, and remove todo items. It was unlike other DOM or web app benchmarks publicly available at the time. These older benchmarks were mostly collections of micro-benchmarks, and didn’t reflect how DOM APIs were used in real web apps, or how individual APIs interacted with the rest of the web browser engine. Speedometer quickly became an important tool for performance measurement and tuning not just in WebKit but also in other browser engines.

In 2018 the WebKit team, in collaboration with Google’s Chrome team, released Speedometer 2.0 , updated to use the latest frameworks and libraries available at the time. The Speedometer benchmark has since gained even more popularity among browser engines as a guide for optimization, and among independent testers and reviewers to compare different devices, operating systems, and browsers.

Today’s release of Speedometer 3.0 marks a major step forward in web browser performance testing. It improves the accuracy of measurement and measures the performance of a wide variety of contents.

Cross-Browser Collaboration

Speedometer 3.0’s release is a result of the collaboration among browser developers to improve the Web as a whole together. Much as Interop 2024 represents joint work to test and improve standards compliance, Speedometer 3.0 is a joint effort to test and improve browser performance.

Where previous Speedometer versions were developed as part of the WebKit project, Speedometer 3.0 has been developed and released under a joint multi-stakeholder governance model including the three major engine browsers: Blink, Gecko, and WebKit, and the repository has received hundreds of open source contributions since the original announcement in December 2022 . This collaboration better ensures fairness in measurement and workload composition. And together, the group created a shared vision for the benchmark.

Improved Test Harness

We’ve improved the way Speedometer measures runtime performance. Prior Speedometer versions measured the time to run a test script synchronously as “sync” time; and the time until a zero-delay timer scheduled at the end of “sync” work fires as “async” time, as shown in the following diagram:

In Speedometer 2, async time was measured as between when a timer is scheduled at the end of sync time and when the timer fires. That sometimes captures layout and paint and other tasks running after synchronous script execution but before the timer fires.

However, this method sometimes misses important work that browser engines do in response to script-driven changes, because synchronous tasks and the zero-delay timer are scheduled without considering the timing of rendering updates. It also didn’t capture any work frameworks delay until the next requestAnimationFrame (rAF) callback, a common technique in modern frameworks. The following diagram illustrates how important work could be missed by the time calculations.

In Speedometer 2, it was possible that requestAnimationFrame, layout, and paint to happen after the async timer had fired in some cases. In such cases, we fail to capture the time browser spends updating the rendering of a web page.

Speedometer 3.0 takes advantage of the fact that all browser engines have adopted the HTML5 event loop model for updating the webpage rendering. It measures test scripts within a requestAnimationFrame callback as “sync” time, and the time to fire zero-delay timer scheduled in a second requestAnimationFrame as “async” time:

In Speedometer 3, we schedule two requestAnimationFrame callbacks. The first one runs and measures sync time, and the second one schedules a timer to measure the async time. Because browsers are expected to update the rendering after invoking requestAnimationFrame callback but before running any other tasks, we always capture the time browser spends updating the rendering of a web page.

Because the zero-delay timer is now scheduled in a second requestAnimationFrame, it’s guaranteed to be fired after all the zero-delay timers scheduled during the synchronous portion of the test had fired. Thanks to HTML5’s event loop processing model, browser engines update the rendering of web pages after all requestAnimationFrame are called before the next zero-delay timer fires. These changes greatly improved Speedometer’s ability to accurately measure the runtime of synchronous work and asynchronous work browsers do in response to script that handles user events.

The test harness has also been rewritten to use modern JavaScript features like modules, native promises, let & const, async & await, and class syntax, which were not widely available at the time Speedometer 1.0 was first written.

Like its precursors, Speedometer 3.0 sums up the runtime taken to simulate user actions such as adding todo items, completing them, and removing them per each workload, and computes the geometric mean of the totals across different workloads. The final score is calculated as the arithmetic mean of the reciprocal of the geometric mean:

In Speedometer 3, each workload can have multiple sync and async times. The total time for all sync and async time is calcualted for each workload, and the score is calculated as the reciprocal of the geometric mean of the totals across workloads.

Adjustment to Score

Since Speedometer’s benchmark content was last updated in 2018, web browsers have gotten increasingly better at handling Speedometer content. Moreover, new hardware, such as Apple Silicon Macs, continues to push the boundary of what’s possible in computing. Where originally scores were scaled to be under 100, modern browsers now can score over 500 on the fastest devices. To make scores easier to compare and to make room for future improvements, we’ve adjusted the score so that a typical web browser will get a score in the 20-30 range to start out.

Updated UI Frameworks

Now let’s take a look at the test content in Speedometer 3. Like the past versions of Speedometer, version 3.0 includes TodoMVC-based todo apps that emulate adding, completing, and removing todo items. To better represent the modern Web, the most widely used JavaScript UI frameworks were identified from the HTTP Archive in March 2023:

In the order of popularity, React, Vue.js, React, Backbone.js, AngularJS, Next.js, Angular, Nuxt.js, lit-html, Knockout.js, Alpine.js, Marionette.js, Gatsby, Svelte, React Redux

The monthly downloads in NPM was also taken into account to find frameworks with high momentum:

In the order of NPM monthly downloads, React, React Redux, Next.js, Vue.js, Angular, Preact, lit-html, Backbone.js, Nuxt.js, Svelte, AngularJS, Gatsby, Alpine.js, Knockout.js, Marionette.js

Based on these data points, we’ve included the following JavaScript frameworks in our todo apps: Angular , Backbone , jQuery , Lit , Preact , React , React+ Redux , Svelte , and Vue . For each framework, the most commonly used version at the time was picked. Todo implementations written in vanilla JavaScript using ES5, ES6, and web components are also included.

Complex DOM Versions

In addition, Speedometer 3.0 includes “complex DOM” versions of some of the TodoMVC applications. In these complex DOM versions, each todo app is embedded inside a UI structure which mimics a web application with many deeply nested DOM nodes and plenty of CSS rules. Even though the benchmark still emulates the same set of operations, doing so in the context of more DOM elements and CSS rules adds work and captures additional performance bottlenecks.

In order to ensure the variety of performance scenarios to be tested, Speedometer 3.0 includes 6 simple DOM todo applications and 6 complex DOM todo applications.

Complex DOM workloads has ribbon menus, side bar tree view, search field, and other complex UI elements surrounding the todo app.

Broader Content

Together, these changes to todo apps dramatically improved the coverage of the benchmark. But Speedometer 3.0 takes it a step further and includes entirely new kinds of applications.

Speedometer 3.0 includes two test apps that mimic typical news sites, built using the popular single page application frameworks Next.js and Nuxt . It emulates user actions such as clicking on menu items and navigating to another page in the single page app setup.

News sites workload mimics a popular news site with navigation menu, hero images, headlines, and a summary of articles.

Speedometer 3.0 also includes four charting applications based on Observable Plot , chart.js , React stockcharts , and WebKit’s performance dashboards . Observable Plot and React Stockcharts are based on D3 and test manipulating SVG-based graphics. Chart.js and WebKit’s performance dashboards test drawing canvas-based graphics.

Charting workloads draw bar graphs of the number of airports in each U.S. state for example.

Finally, Speedometer 3.0 has added two text editing applications: a JavaScript code editor built with CodeMirror and a WYSIWYG editor built with TipTap . In both scenarios, it emulates the steps to create a new editable region, loading a large amount of text, and syntax highlighting or boldening text:

CodeMirror workload, for example, loads React's codebase and enables syntax highlighting

The addition of these new applications dramatically broadens the scope of what Speedometer 3.0 measures, and provide new opportunities for browser engines to optimize a broad spectrum of features like JavaScript, style, layout, graphics, and DOM.

Future Work

Today marks a remarkable milestone for the Web platform. Speedometer 3.0 sets a whole new standard for measuring web browser performance. As browser developers optimize their engines, this will expand the horizon of what Web developers can achieve in the years to come. Because the goal of the Speedometer benchmark is to reflect the real-world Web as much as possible, we’re expecting this benchmark to evolve over time. We’ll be regularly updating the list of frameworks to be tested, and periodically updating the tested framework’s versions to reflect the real world usage. You can try Speedometer 3 benchmark on browserbench.org . If you have any feedback or questions, feel free to file issues on Github .

IMAGES

  1. WebKit Features in Safari 16.0

    webkit scroll safari

  2. News from WWDC23: WebKit Features in Safari 17 beta

    webkit scroll safari

  3. New WebKit Features in Safari 15

    webkit scroll safari

  4. New WebKit Features in Safari 12.1

    webkit scroll safari

  5. WebKit Features in Safari at WWDC21

    webkit scroll safari

  6. iOS 16 Safari experimental WebKit features

    webkit scroll safari

VIDEO

  1. HTML 5 Demo vs Flash

  2. WebFOCUS Designer Theme and AppStudio HTML Canvas customize scrollbar design

  3. Tata safari #shorts

  4. safari scroll bug

  5. How to Always Show your Scrollbar in Safari (for MacBook Users)!

  6. tata safari launch update

COMMENTS

  1. ::-webkit-scrollbar

    The ::-webkit-scrollbar CSS pseudo-element affects the style of an element's scrollbar when it has scrollable overflow.. The scrollbar-color and scrollbar-width standard properties may be used as alternatives for browsers that do not support this pseudo-element and the related ::-webkit-scrollbar-* pseudo-elements (see Browser compatibility).

  2. CSS webkit-scrollbar and safari

    Sorted by: 1. Make sure you set the below property to auto, for webkit-scrollbar to work in IOS, -webkit-overflow-scrolling: auto !important; !important is required, only if you are overriding some predefined library CSS. else, -webkit-overflow-scrolling: auto; would work. Share. Improve this answer.

  3. WebKit Features in Safari 17.4

    In addition, we updated the handling of align-content and justify-content on scroll containers in WebKit for Safari 17.4. Now, for example, you can use CSS to set the initial scroll position to the end rather than the start of the content. div { overflow: auto; align-content: unsafe end; } /* end-aligned scroller */

  4. Styling Scrollbars

    Here is a screenshot for those not running a recent enough WebKit: The scrollbar pseudo-element indicates that an object should use a custom scrollbar. When this pseudo element is present, WebKit will turn off its built-in scrollbar rendering and just use the information provided in CSS.::-webkit-scrollbar { width: 13px; height: 13px; }

  5. The Current State of Styling Scrollbars in CSS (2022 Update)

    A Cross-Browser Demo of Custom Scrollbars. It's fairly consistent across Chrome, Safari, and Firefox:

  6. WebKit Features in Safari 17.0

    WebKit for Safari 17.0 brings the new Managed Media Source API to iPad and Mac, with iPadOS 17, macOS Sonoma, macOS Ventura, and macOS Monterey. ... Fixed scrollbar to correctly pick up changed styles immediately. (109674102) Fixed :has() to support invalidation of the :definedpseudo-class. (109896689)

  7. Scrollbar Styling in Chrome, Firefox, and Safari

    Here are the selectors specific to Safari:::-webkit-scrollbar: Targets the scrollbar as a whole.::-webkit-scrollbar-thumb: Targets the draggable thumb.

  8. Guide to styling CSS scrollbars

    Styling scrollbars in Chrome, Edge, and Safari. Webkit browsers allow scrollbar styling using pseudo-elements like :: -webkit-scrollbar, ::-webkit-scrollbar- button, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track, and more. Each of these targets different parts of the scrollbar, as listed above. The CodePen below shows an example of a ...

  9. -webkit-prefixed CSS extensions

    Vendor Prefix glossary entry. Mozilla vendor-prefixed CSS extensions. Styling Form Controls on the WebKit Trac. User agents based on WebKit or Blink, such as Safari and Chrome, support several special extensions to CSS. These extensions are prefixed with -webkit-.

  10. Styling Scrollbars with CSS in Most Modern Browsers

    Chrome, Safari, and Microsoft Edge use the WebKit engine with the -webkit-scrollbar prefix pseudo-element for styling scrollbars. Firefox also allows styling with a few options, including scrollbar width and color. ... -webkit-scrollbar-button:single-button:vertical:decrement { border-color: transparent transparent #9b6a2f transparent; ...

  11. Custom Scrollbars in WebKit

    These pseudo elements and pseudo class selectors work together. Here are some random examples: ::-webkit-scrollbar-track-piece:start {. /* Select the top half (or left half) or scrollbar track individually */. } ::-webkit-scrollbar-thumb:window-inactive {. /* Select the thumb when the browser window isn't in focus */.

  12. New WebKit Features in Safari 13

    Fast scrolling emulation libraries are no longer needed and -webkit-overflow-scrolling: touch; is a no-op on iPad. On iPhone, it still has the side-effect of creating a CSS stacking context on scrollable elements. ... In Safari on macOS, WebKit added the ability for users to share their screen with others natively, using web technologies, ...

  13. How To Create a Custom Scrollbar

    For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar: ::-webkit-scrollbar the scrollbar. ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards). ::-webkit-scrollbar-thumb the draggable scrolling handle. ::-webkit-scrollbar-track the track (progress bar) of ...

  14. Scrollbar styling

    Demo: Styling Scrollbars using scrollbar-* with a fallback to ::-webkit-scrollbar-* Note that when you set the width or height of ::-webkit-scrollbar, an overlay scrollbar is always displayed, effectively turning it into a classic scrollbar. To keep the illusion, you can choose to only change the colors when hovering the scroller.

  15. 11 Moscow Parks To Visit And Spend a Beautiful Time

    Museon Art Park - A Second Gorky they say. "Museon" is located on the opposite side of Krimsky Val street. And right now some people believe that Gorky and Museon together is a one space sharing the same beauty. Free. 24h open. Oktybrskaya or Park Kultuty metro station, Krimsky Val, 2.

  16. WebKit Features in Safari 16.4

    The new Scroll badge calls out scrollable elements, and the new Events badge provides quick access to the event listeners associated with the element when clicked. And a new Badges toolbar item makes it easy to show just the badges you are interested in and hide others. ... WebKit for Safari 16.4 includes an incredible amount work polishing ...

  17. Walking Tour: Central Moscow from the Arbat to the Kremlin

    And, of course, more history in one street corner than in many entire towns. This tour of Moscow's center takes you from one of Moscow's oldest streets to its newest park through both real and fictional history, hitting the Kremlin, some illustrious shopping centers, architectural curiosities, and some of the city's finest snacks. Start ...

  18. How live in Russia 2023? Moscow City Walk Tour: New ...

    Embark on a captivating journey through the heart of Moscow with our immersive City Walk. ⚠️ Follow for more: https://www.youtube.com/@Real-Russia-4K-Walks F...

  19. WebKit Features in Safari 16.5

    WebKit for Safari 16.5 provides multiple bug fixes and feature polish. CSS. Fixed Scroll to Text Fragment sometimes scrolling to the top after reloading the page. Fixed support for x resolution unit in calc(). Fixed reflecting trimmed block-start, block-end, inline-start, and inline-end margins for grid or flex items in computed styles.

  20. Moscow

    Moscow City River Cam, Russia. This live HD webcam at the Maxima Panorama hotel features breathtaking panoramic views of Moscow city and the banks of the Moskva River (peкa Москвa, Москвa-peкa, Moskva-reka), which flows through central Moscow, Russia 's capital. As indicated on the map further down the page, the Maxima Panorama ...

  21. Introducing Natural Input for WebXR in Apple Vision Pro

    WebXR now includes a more natural and privacy-preserving method for interaction — the new transient-pointer input mode — available for Safari 17.4 in visionOS 1.1. Let's explore how natural input for WebXR works, and how to leverage it when developing a WebXR experience for Apple Vision Pro.

  22. Speedometer 3.0: The Best Way Yet to Measure Browser Performance

    As announced on browserbench.org today, in collaboration with other browser engine developers, Apple's WebKit team is excited to introduce Speedometer 3.0, a major update that better reflects the Web of today.It's built together by the developers of all major browser engines: Blink, Gecko, and WebKit with hundreds of contributions from companies like Apple, Google, Intel, Microsoft, and ...