Top Safari Browser Compatibility Issues in 2018

Apple offers a wonderful browser, power packed with state of the art web technology usage. Safari has a neat UI, good browsing speed and offers unique curated features. It is true that chrome has started infiltrating the apple machines for a while now, but Safari still grips crucial browser share. Taking into consideration it becomes paramount that the websites should pass the litmus test for performance in Safari. Webkit engine fueled with nitro JavaScript surely makes your browser experience smooth, but while making websites more compatible with it you need to abide by a few rules.

Guidelines issued by Apple dictate the use of standard supported CSS, HTML and Javascript (ECMA6) content. For most common websites, latest Safari works normally like any other browser, but if the website has used anything novel, it gets into trouble. Apple is fast in keeping up with new tech. However when it comes to browsers, it is nowhere near as fast as Chrome or Firefox. While there can a lot of issues that may handicap your website, I have listed the major issues that will definitely put a dent on your website performance if not taken care of.

CSS

Unsupported CSS is the root cause for a lot of cross browser compatibility issues, same is the case with Safari too. The race for efficient styled content has led the developers to using the latest web technologies that sometimes lack the browser support. While it is advisable to aim for responsive design techniques to make styling flexible for multiple viewports, let us look for the features that lack support in the latest 11.1 version and which should be avoided.

CSSOM Scroll Behavior

It is a method for specifying scroll behavior for scrolling box, navigational scrolling specifically.

Web Animations API.

Lets you create animations that are run in browser and as well as inspect and manipulate animations created through declarative means like CSS.

CSS Containment

If you use this to limit the CSS content to boost the website efficiency, then switch to alternate method.

CSS Touch- action property

It keeps in check the control filtering of gesture events, developer options to selective disabling of touch scrolling.

CSS Text alignment last

CSS Overscroll Behavior

CSS Motion Path

ECMA 6

While Safari offers support to a wide range of ECMA 6 features like Geolocation API, and exclusively offers features like Tail Call optimisation which you can exploit efficiently, there are a few unsupported features.

Shared memory and atomic

Asynchronous iterators

Lookbehind assertions in the RegExp

Background sync API

Multimedia

You must be extremely careful while choosing the multimedia formats as Safari has issues with certain formats. Forget about Flash-plugins, below mentioned are a few of the formats that lack the Safari support.

Media Recorder API

Mediastream recording targets to provide simplistic approach deployed by developers to record media from the user input and instantly use them in web apps, rather than having to perform manual encoding operations over and over again.

Ogg Vorbis audio format

Vorbis is a free and open source, commonly used in the Ogg container.

Ogg/ Theora video format

Free lossy video compression format.

WebM video format

Multimedia format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video. WebM supports the video codec VP8 and VP9.

Opus

Another open codec by IETF, which incorporated SILK from Skype and CELT from Xiph.org, to serve higher sound quality and lower latency bit rate.

Transport Layer problems

Safari has issues with some of the Transport layer features consistently. We take a look at the features that to this date haven’t given due attention.

TLS 1.3

Safari seems to lack support for the upcoming version of the Transport Layer Security (TLS) Protocol which will remove the weaker elliptic curves and hash functions. Both Chrome and Firefox are ahead of the curve with stable versions supporting the TLS.

ChaCha20 cipher suites

A set of cipher suites in TLS protocol which use symmetric encryption, in addition Poly 1305 which is used for authentication is also not given due attention by Safari.

Some more important features that remain without support are as follows:

Resource Hints: Prefetch

This feature is used and supported by leading browsers, informs the browsers so as to which resources should be prefetched in order for them to load more quickly.

Resize Observer

Observing and reacting to the changes occuring in the size of DOM.

Permission API

High level JavaScript API for checking and requesting permissions.

HTML Imports

Method of including and reusing HTML documents in other HTML documents.

Web MIDI API

The web MIDI API specification defines a means for web developers to enumerate, manipulate and access MIDI devices.

Public Key Pinning

Declare that a website’s HTTP certificate should only be treated as valid if the public key is contained in a specified list to prevent MITM attacks that use valid CA-issued certificates.

Web Authentication API

The Web Authentication API is an extension of the Credential Management API that enables strong authentication with public key cryptography, enabling password-less authentication or secure second-factor authentication without SMS texts.

Visualizing Layer in Web Inspector

The layers tab is an experiment feature for Web inspector and I must say it is quite helpful. On First look it may look similar to the Firefox’s Tilt however there is a difference as Layer tab gives a 3-D visualization of the inspected page’s compositing layer and informs how they are rendered whereas Tilt provides visual representation of DOM tree.

The 3-D representation of rendering has potential to eradicate a lot of performance issues, the feature has long term benefits of debugging.

PWA Support

It seems that Safari finally realized that PWA’s are the future, Apple has finally made up its mind to support them wholeheartedly. If you want to know more about PWA, click on the below mentioned link.

Planning To Move Your App To A PWA: All You Need To Know

Service Worker API

Service workers hold the key for successful web apps as they provide a way to run the javascript in the background. Software giants including the E-commerce websites like Flipkart, Amazon, Aliexpress have all started focusing on PWA. With service worker support now the realization of fully functional PWA including offline access, faster and improved caching and last but no the lease push notification. Without SW users of Safari would not have been able to witness the miracle of PWA.

Web App Manifest

If you have any experience with PWA, you must know that even with SW support you’ll still need Web App Manifest to unleash the true potential of the PWA. Apple on 24th October last year announced that implementation of the Web App Manifest has started in Webkit. They will enable the users to configure the meta data in order to define how the app will be launched. Soon you’ll be able to add them to the home screen.

Conclusion

With strong backing by Apple, Safari is not going to become obsolete anytime soon. Although by following the above steps, you can ensure website compatibility on Safari but it is of utmost importance that while developing you should be neutral and make a website that in true sense will be Cross Browser Compatible. We at LambdaTest provide solutions to all your testing needs, test your website on LambdaTest to find out additional problems.

Robin Jangu

Robin is a Tech Blogger and Social Media Marketer.

See author's profile