Safari needs a default zoom setting like Chrome

I really don't like Google Chrome very much. But lately I have been kind of forced to use it because of just one reason: I grew increasingly tired of launching Safari and having to press the magnify zoom level button once or do Cmd + once for each and every website I visit.

I have a MacBook Pro (Retina, 15-inch, Mid 2015) with the display set to the default, which is 1440x900, using Yosemite with all the latest updates installed. When I open Safari and load, let's say, Facebook, the text is too small. There's also a lot of wasted space, but my main problem is that the text is too small. So you would say, set the "Never use font sizes smaller than #", which I set to 12, because at 14, websites get messed up, as you can see here:

I've seen worse examples and I concluded that 12 is the maximum that doesn't break any websites. But at 12, the text is still too small for my taste, it's barely different from having that option disabled. So the minimum font size option doesn't work for me.

So the other option is the famous CSS file with the zoom level of your choice and select it in the preferences:

html {

zoom: 120%;

}

The problem is, the CSS zoom is not the same as using Safari's zoom. Here are a few examples:

This is Facebook without the CSS file, with the default zoom, and no minimum font size:

Now here's with one zoom level, using either Cmd and + or pressing the zoom button on the toolbar:

I don't think Safari says anywhere what percentage each zoom level is, but it would seem to me that it's about 120%.

Then here you have the same but with Safari's own zoom level at default, and the CSS file selected (set to 120%, as you see in the code above):

Finally, here's Safari's own zoom with two levels (no CSS file selected):

Take a look at the differences between the Safari zoom and the CSS zoom. Either with Safari's zoom at one level or the 120% CSS file, the text is about the same size. But as you can see, the spacing is different. With the native zoom, the names in the chat list are gone, only the avatars remain. In the CSS version, both the names and avatars are present. Since the names are gone in the native zoom version, there is a lot more empty spacing on the left of the page as well as the left of the chat list avatars.

Now, I'm just using this case as an example because you can clearly see there's a difference between the native zoom and the CSS one, but in this case the CSS zoom does a better job and if all websites behaved this way I'd be happy to keep using it. However, I have tried to use the CSS option several times over the past few months and I keep disabling it, because it breaks too many pages, one of them YouTube. Not only it doesn't have any left margin when it's enabled, some videos are cropped. I've seen several other websites getting messed up really bad by using CSS as well. So to me CSS is not an option.

Unfortunately all the extensions that are related to default zoom only work by using the CSS method, even if they don't select it in the preferences, but you can tell by the way Facebook and other pages look, after having done the comparison I did without any extensions installed. I haven't found a single extension (and please let me know if you did) that works by setting a default zoom level using Safari's native zoom instead of the CSS method.

So this ***** because other than this problem, Safari is a really good browser, and it integrates very well with iOS. Neither Chrome nor Firefox have handoff, and whatever bookmarks I save in my iOS devices transfer to Safari on OS X. Besides, it's the browser that gives me the most amount of screen space for the website itself. Both Chrome and Firefox have GUIs with a lot of wasted space. Besides, Firefox may be great on Windows but its performance kinda ***** on OS X. The scrolling is especially bad compared to Safari and Chrome.

So after all this, what I would like to know is, is it really hard to make an extension that uses Safari's native zoom instead of the CSS option? And, does anybody know of a way to save the zoom level for each website? It seems to me that when you set a zoom level for a tab, as long as you keep opening pages in that same tab, it keeps the zoom level you have set, but as soon as you open another tab, it goes back to 100%.

Or perhaps there might be a better CSS script that uses Safari's own zoom, or at least doesn't mess up websites?

Thanks for any replies 🙂