robinjanguApple 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 lastCSS Overscroll BehaviorCSS 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 atomicAsynchronous iteratorsLookbehind assertions in the RegExpBackground 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.
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.
Check this out: Playwright Automated Testing Online- Run your Playwright test scripts instantly on 50+ browser and OS combinations using the LambdaTest cloud. Execute Playwright testing in parallel and cut down your test execution time by multiple folds.
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.
Check this out: Cypress Test Automation Online- Execute & analyse Cypress testing scripts online. Deploy quality builds faster with 40+ browser versions on cloud
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.
Check this out: Selenium Automation Cloud - Test on Selenium Grid Cloud of 3000+ Desktop & Mobile Browsers
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.
