Top Safari Browser Compatibility Issues in 2018
Cross Browser Testing • Manual Testing •
12631 Views | 7 Min Read
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.
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
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
Lookbehind assertions in the RegExp
Background sync API
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.
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.
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.
Observing and reacting to the changes occuring in the size of DOM.
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.
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.
Service Worker API
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.
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.
Written by Robin Jangu
49355 Views | 16 Min Min Read
67205 Views | 11 Min Min Read
117095 Views | 12 Min Min Read
101269 Views | 14 Min Min Read