• Safari Has Become The Second Internet Explorer
  • Golosay Volodymyr
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Hoarfroster
  • Proofread by: LSvih

If you were to ask a programmer how they feel about hearing the word IE, it would be something like this: OMG! I’m certainly no exception! I’ve been a Web developer for over a decade, and in that time I’ve worked on a number of projects that had to be IE compatible. It’s clear to me how frustrating it is for us bald programmers to have some weird browsers that don’t support common features that other browsers support. Or, sometimes, they even render elements in the wrong place! Even worse, you may have to debug some unexpected wrong behavior at some point.

Luckily, I use a new MacBook Pro with an M1 chip in my daily life. I’m a big fan of using Apple software because it’s always fast, energy efficient, and beautiful. Safari is one of the programs Apple offers. I want to love Safari again, but the more I work with it, the more I think about IE. Therefore, it is important to address these issues that concern everyone’s personal hair safety. For some of these problems, I’m going to offer you treatments to prevent hair loss.

PWA support

Safari support for PWA? It’s more the lack of support! Apple was one of the most egregious rejections of PWA at the time. Do you know what PWA is? PWA is a web application that can be opened in a browser and installed locally. It looks just like a regular app installed from the app Store and has the ability to launch offline. In theory, you could try it right away on your browser (for example, by installing the PWA app on your iPhone), but good Apple will discourage you with the following excuses:

  • You can’t store more than 50 MB of data
  • Bluetooth not supported
  • Native share boxes are not supported
  • No background synchronization or Web push notifications
  • No Web App banner reminding users to install the App
  • Custom splash screen is not supported

These limitations make THE PWA technology useless. Rather than technology, Apple may want to control the market so that only so-called real apps can be installed through the App Store.

You can’t use it at all in Safari on the Mac.

Web Push Notification

Although this topic is on the PWA’s restricted list, it is worth mentioning in its own right.

On the Mac, the Web version of some applications cannot send push notifications, resulting in a failure to provide full functionality.

Messenger apps are a prime example. Today, Telegram or Facebook Messenger can only notify users of new messages by changing the title and playing a sound when the site is open. If users mute and minimize their browser, they will obviously miss new messages.

The only good thing about this restriction is that news sites don’t have annoying notifications asking you to subscribe to them — which is great, but doesn’t mean we don’t need notifications at all!

The slide show

Apple prides itself on Safari’s performance and energy efficiency (and rightly so)!

To achieve this performance, they implemented a number of optimizations, one of which was to prevent DOM updates while users were scrolling dynamically. But after the optimization, users began to see some scrolling lag in the browser. The most famous problem – scrolling comments on YouTube video pages. Dozens of users discussed the issue on official support forums and MacRumors.

To fix this, you must install the UserScripts extension and add some CSS styles:

// ==UserScript==
// @name FixYouTubeScrolling
// @description Stop improper styling, Google
// @match *://*youtube.*
// ==/UserScript==

ytd-page-manager {
    overflow-y: unset ! important;
}

#page-manager.ytd-app {
    overflow-x: unset ! important;
}
Copy the code

But that’s not the only problem. I’ve seen similar scrolling problems on a number of different sites that add a lot of functionality to scrolling events (Youtube Music, Facebook, Reddit, etc.).

That’s the price of fast scrolling, so I hope Apple finds a better balance between performance and performance.

YouTube

Let’s talk about YouTube! Chances are you’ve encountered problems with thumbnails or avatars that don’t load, and you can find many posts on this issue in Apple forums (like this one and this one).

I don’t know the root cause of the problem, but it is clearly a cache error. Clearing the cache can solve this problem, though. But it still sometimes recurs.

There are two ways to clear the cache in Safari:

  1. In Safari, press the refresh button on your keyboardShiftThe key.
  2. Press Command (⌘) + Option (⌥, Alt) + R on the keyboard.

Take your choice

icon

Can you see the Instagram page icon in Safari on the Mac? For some reason, it’s black and white.

This is a minor but very strange question. You can try it out for yourself and see that real ICONS should be colored. This question also appears on my Methodist. IO page. I’ve seen this problem on many sites, and if you know why it’s happening and how to fix it, please share it in the comments

expand

Prior to 2018, Safari did not have a framework for building browser extensions. As a result, there are really few extensions for Safari in the App Store. Only after 2018 did they begin to use the WebExtensions Api, as Chrome does. This is a huge step forward for extender developers because the core apis of the major browsers are already the same. It’s been a long time coming, but there’s still a big difference in the number of extensions available in Safari compared to other browsers today.

Standardization of media formats

You probably all know the JPEG and PNG image formats. They are old (they were created in 1992) and the files are large. So in 2017, the tech giants all decided to design more efficient media formats. Apple released High-Efficiency Image Coding (HEIC) and Google promoted WebP. But for some reason, they don’t recognize each other. Chrome only supports WebP and Safari only supports HEIC. It wasn’t until mid-2020 that Apple added WebP support to Safari.

This question is about graphics, but it also applies to video. Google designed the WebM format for video, but even now (as of January 2021) Safari doesn’t support it.

In 2019, IT giants began collaborating to develop AV1, an advanced, free video codec. Apple, Google, Netflix and others (the list is impressive) have formed an “Open Media Alliance” of companies that have shared their technology and patents to create generational decoders. So far, the decoder has been developed and Netflix uses it in its apps, but Safari still doesn’t support it.

As you can see, Safari is a very conservative browser, and Apple has always been reluctant to align itself with the wishes of its users.

summary

Safari is a fast, power-efficient (and even) secure browser. But Apple has a mind of its own. Of course, Apple still likes to make money, and allowing users to bypass the App Store to install apps is not a profitable idea. Similar justifications are common for incompatibility with certain mainstream media formats, but these issues have really held up the technology and created more problems for us bald developers.

Thanks for reading!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.