Hooray! Chrome 63 has been released today, a month and a half since the previous release. We already installed it on our machines and here it is, available for all your cross-browser testing needs.

Chrome 63 Version

Try it yourself right away!

What's new in Chrome 63?

  • Various fixes from internal audits, fuzzing and other initiatives.
  • Browser allows you to import JavaScript modules dynamically.
  • With async generator functions and the async iteration protocol, consumption or implementation of streaming data sources becomes streamlined.
  • You can override the browser's default overflow scroll behavior with the CSS overscroll-behavior property.
  • A number of fixes and improvements.

For iOS:

  • Swipe up on the New Tab Page to explore suggested content from the web.
  • The ability to reorder bookmarks is back!

For Android:

  • Chrome for Android will make permission requests modal dialogs.
  • Stability and performance improvements.

Dynamic module imports

While the importation of JavaScript modules is quite handy - it is static. You can't import them based on some runtime conditions. Since Chrome 63 you can take advantage of the dynamic import syntax, which allow you to dynamically load code into modules and scripts at runtime. It can significantly improve performance or in the most-frequent-scenario - load a script at runtime, when it is needed.

button.addEventListener('click', event => {
  import('./dialogBox.js')
    .then(dialogBox => {    
    dialogBox.open();
  })  
  .catch(error => {
    /* Error handling */
  });
});

Asynchronous iterators and generators

Writing code that does any sort of iteration with async functions can be inelegant. The new async generator functions using the async iterations protocol are not available to help developers streamline the consumption or implementation of streaming data sources. Async iterators can be used in for loops and also to create custom async iterators through async iterator factories.

Over-scroll behavior

Slider bars a.k.a scrollbars are smarter than most people might have noticed. Or maybe "smarter" is not the correct word for it, maybe "functional". The smartness comes with features like gesture recognition. It is tricky to deal with functionalities like the "hard reload" for which you have to swipe down at the top of the page. Chrome 63 now supports the CSS overscroll-behavior property, making it easy to override the browser's default overflow scroll behavior. You can use it cancel scroll chaining, disable or customize the pull-to-refresh action, disable rubber banding effects on iOs, Add swipe navigations and more.

Permission UI changes

We all both like and dislike in the same time those nice and annoying web push notifications asking for permission on page load that can appear to save us from mistaken action or to just frustrate us by their uselessness. Statistics say that actually 90% of those notifications are either ignored or blocked, so nobody really pays attention to them. Chrome 59 addressed this problem by temporarily blocking a permission if the user dismissed the request three times. Chrome 63 for Android will turn those permission requests into modal dialogs.

Chrome 63 Modal Permissions

Developer features and updates in Chrome 63

  • Ambient Light Sensor API - based on Generic Sensor API. - This API is a handy way to make a web page or web app aware of any change in light intensity (see also sensors).
  • Async Iteration / Async Generators - Async Generator functions and a new iteration protocol (used by for-await-of loops and yield* expressions), to streamline consumption or implementation of streaming data sources.
  • CSS 'q' length unit - support 'q' absolute length unit. 1q is equivalent to 1/40th of 1cm.
  • CSS font-variant-east-asian - Add support for font-variant-east-asian and respective mapping for the font: shorthand and the font-variant: shorthand.
  • CSS overscroll-behavior - CSS overscroll-behavior allows developers to decide the browser's behavior once a scroller has reached its full extent. The unused delta can be propagated to the parent causing scroll chaining, create a glow/bounce effect without chaining, or just get consumed silently. This would be a standardization of "-ms-scroll-chaining" with some modification.
  • Device Memory JS API - JS API to expose the device Memory to web applications.
  • EventTarget.addEventListener/removeEventListener throws a TypeError - EventTarget.addEventListener/removeEventListener throws a TypeError when the second argument |callback| is neither of EventListener nor Null nor Undefined. Historically Blink had not been reporting a TypeError for the second argument of EventTarget.{add,remove}EventListener, but reports a TypeError since M63.
  • HTMLAllCollection and HTMLCollection's named properties are no longer enumerable - Blink now follows the DOM and HTML specs and declares HTMLAllCollection, HTMLCollection, HTMLFormControlsCollection and HTMLOptionsCollection with the [LegacyUnenumerableNamedProperties] extended attribute. Its named properties are no longer marked as enumerable, being left out of calls to e.g. Object.keys() and for-in loops.
  • Interface properties with a Promise type no longer throw exceptions - Interface properties that return a Promise now reject (meaning they'll invoke a catch block) instead of throwing an exception. This has already been done for functions.
  • Intl.PluralRules - Intl.PluralRules is a new API which exposes language-dependent data on pluralization forms of numbers. Given a locale and a number, Intl.PluralRules outputs a category, which can then be used for selection of the pluralization form of surrounding text.
  • JavaScript module import() - This JavaScript feature adds a "function-like" import() module loading syntactic form to JavaScript. The existing syntactic forms for importing modules are static declarations. However, it's also desirable to be able to dynamically load parts of a JavaScript application at runtime.
  • Make /deep/ behave like the descendant combinator " " in CSS live profile (in css file or inside of < style >) - Make /deep/ behave like the descendant combinator " " in CSS live profile; effectively no-op. See "Intent to Remove" thread for more details and this. CSS live profile = CSS selector used in CSS file or inside of <style>. CSS snapshot profile = CSS selector used in JS, such as querySelector(..)
  • MediaStreamTrack.applyConstraints - applyConstraints() allows changing the constraints associated with a MediaStreamTrack. This is useful to change settings such as video resolution or frame rate. applyConstraints() was previously released with support for ImageCapture (link). This feature includes adding support for the main spec (link).
  • No State Prefetch - A mechanism for speculative prefetching of webpages and their subresources that are on a critical path of page loading without executing any JavaScript or creating a complex state of the web platform. This system is not purely “no state” because HTTP cache allows to create cookies and other state related to validating cache entries. It is important to note that the “NoState Prefetch” is not an API. Server side detection here.
  • Promise.prototype.finally - This finally method is used for registering a callback to be invoked when a promise is settled (either fulfilled, or rejected).
  • Shadow-Piercing descendant combinator, '/deep/' (aka '>>>') for dynamic profile (in stylesheets) - When a /deep/ combinator (or shadow-piercing descendant combinator '>>>') is encountered in a selector, replace every element in the selector match list with every element reachable from the original element by traversing any number of child lists or shadow trees. Note: /deep/ was for Shadow DOM V0, >>> was for Shadow DOM V1. See also this and this.
  • Web Storage: Anonymous getter may return null - Blink used to add an anonymous named property getter to the Storage interface (used by sessionStorage and localStorage) that behaved slightly differently from the getItem() method. The anonymous getter has been removed, and getItem() is now used behind the scenes instead. One visible consequence is that attempting to access a key that does not exist via the getter will return null instead of undefined.
  • Web Storage: Methods are now enumerable - The methods belonging to the Storage IDL interface (available via sessionStorage and localStorage), such as getItem(), clear() and removeItem() are now enumerable as mandated by the HTML spec. They are not returned by Object.keys(), but do appear in e.g. for-in loops.
  • beforeprint and afterprint events - 'beforeprint' event is dispatched before starting printing, and 'afterprint' event is dispatched after finishing printing. They are useful to build printing-only content, and clean it up.
  • display:minimal-ui - Support the minimal-ui display mode as defined in the Web App Manifest. This property will result in Chrome displaying a "Chrome Custom Tab"-like UI.
  • macOS: rounded borders for buttons in User-Agent stylesheet - Only for macOS. The default stylesheet for <button>, <input type=button>, <input type=reset>, <input type=submit>, a button in <input type=file> was changed in order to match OS-native buttons. Background-color, border, border-radius, and padding were changed.
  • navigator.webdriver - The Webdriver specification defines a navigator.webdriver property to indicate if UA is controlled by automation. This property is defined and returns true when running Chrome with the --headless flag.

Bug fixes

Critical bug fixes

  • CVE-2017-15407: Out of bounds write in QUIC. Reported by Ned Williamson on 2017-10-26

High-threat bug fixes

  • CVE-2017-15408: Heap buffer overflow in PDFium. Reported by Ke Liu of Tencent's Xuanwu LAB on 2017-09-06
  • CVE-2017-15409: Out of bounds write in Skia. Reported by Anonymous on 2017-09-11
  • CVE-2017-15410: Use after free in PDFium. Reported by Luật Nguyá»…n (@l4wio) of KeenLab, Tencent on 2017-09-16
  • CVE-2017-15411: Use after free in PDFium. Reported by Luật Nguyá»…n (@l4wio) of KeenLab, Tencent on 2017-09-29
  • CVE-2017-15412: Use after free in libXML. Reported by Nick Wellnhofer on 2017-05-27
  • CVE-2017-15413: Type confusion in WebAssembly. Reported by Gaurav Dewan(@007gauravdewan) of Adobe Systems India Pvt. Ltd. on 2017-09-19

Medium-threat bug fixes

  • CVE-2017-15415: Pointer information disclosure in IPC call. Reported by Viktor Brange of Microsoft Offensive Security Research Team on 2017-09-15
  • CVE-2017-15416: Out of bounds read in Blink. Reported by Ned Williamson on 2017-10-28
  • CVE-2017-15417: Cross origin information disclosure in Skia . Reported by Max May on 2017-03-07
  • CVE-2017-15418: Use of uninitialized value in Skia. Reported by Kushal Arvind Shah of Fortinet's FortiGuard Labs on 2017-09-15
  • CVE-2017-15419: Cross origin leak of redirect URL in Blink. Reported by Jun Kokatsu (@shhnjk) on 2017-10-31
  • CVE-2017-15420: URL spoofing in Omnibox. Reported by WenXu Wu of Tencent's Xuanwu Lab on 2017-10-23
  • CVE-2017-15422: Integer overflow in ICU. Reported by Yuan Deng of Ant-financial Light-Year Security Lab on 2017-10-13
  • CVE-2017-15430: Unsafe navigation in Chromecast Plugin. Reported by jinmo123 on 11/1/2017

Low-threat bug fixes:

  • CVE-2017-15423: Issue with SPAKE implementation in BoringSSL. Reported by Greg Hudson on 2017-10-25
  • CVE-2017-15424: URL Spoof in Omnibox. Reported by Khalil Zhani on 2017-08-16
  • CVE-2017-15425: URL Spoof in Omnibox. Reported by xisigr of Tencent's Xuanwu Lab on 2017-08-17
  • CVE-2017-15426: URL Spoof in Omnibox. Reported by WenXu Wu of Tencent's Xuanwu Lab on 2017-08-18
  • CVE-2017-15427: Insufficient blocking of JavaScript in Omnibox. Reported by Junaid Farhan (fb.me/junaid.farhan.54) on 2017-09-26

[source]

Have a wonderful time cross-browser testing with Chrome 63 and Browserling!