What’s new in Chromium 64 and Opera 51

Opera 51 (based on Chromium 64) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog post. Here’s what it means for web developers.

Mitigations for the “Spectre” vulnerability

In order to mitigate the recently disclosed security vulnerability called “Spectre”, the following restrictions that affect the functionality of the web platform have been applied:

  • The SharedArrayBuffer functionality has been removed.
  • The resolution of performance.now() has been clamped to 100μs.

Both of the above serve to reduce the possibility of performing a side-channel attack to read sensitive user data, by removing potential ways to acquire a high-precision timing source.

Resize Observer

Responsive web applications are often written using CSS media queries or window.onresize to build components that adapt to different viewport sizes. Both of these are global signals, thus requiring the overall viewport to change in order for the site to respond accordingly. With the Resize Observer API, web applications can observe changes to sizes of elements on a page with finer granularity.

The following code snippet uses the Resize Observer API to observe size changes to an element:

  const ro = new ResizeObserver((entries) => {
    for (const entry of entries) {
      const cr = entry.contentRect;
      console.log('Element: ', entry.target);
      console.log(`Element size: ${cr.width}px × ${cr.height}px`);
      console.log(`Element padding: ${cr.top}px / ${cr.left}px`);
    }
  });

  // Observe one or multiple elements
  ro.observe(someElement);

import.meta

Developers writing JavaScript modules often want access to host-specific metadata about the current module. To make this easier, support for the import.meta property has been added. This property currently exposes the module URL as import.meta.url. Authors of libraries may want to access the URL of the module being bundled into the library to more easily resolve resources relative to the module file as opposed to the current HTML document.

Other features in this release

  • The offset-path property can now be animated, allowing for even more creative ways to move an element around.
  • The default preload value for <video> and <audio> elements has been changed to metadata in order to reduce bandwidth and resource usage, by only loading resource metadata and not the media resource itself. This aligns Opera with other browser implementations.
  • A "NotSupportedError" DOMException is now thrown when a media element’s playbackRate is set to a value that is not supported by Opera, like a negative value.
  • getUserMedia() now returns a rejected Promise with a DOMException or OverconstrainedError when there is an error.
  • The cache mode of a Request can now be specified using the cache option and accessed using Request.prototype.cache. For reload requests, the "reload" value is now also exposed through said property.
  • Support for the transform-box CSS property has been added. This allow developers better control over what percentages are resolved against in the transform and transform-origin properties on SVG elements.
  • AudioWorklet, an API that exposes low-level audio processing capability to support custom AudioNodes, is now available behind the experimental flag.
  • The RTCPeerConnection interface now supports addTrack() for single stream use cases, as well as removeTrack(), getSenders() and ontrack. A minimal version of the RTCRtpSender interface is now also supported.
  • window.alert() no longer brings a backgrounded tab to the foreground but instead shows the alert when the user switches to the background tab.

Deprecations and interoperability improvements

  • An Element can no longer host more than one Shadow Root. This behavior has been deprecated since Opera 32.

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.