safari address bar overlaps content

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Text in Safari Address Bar is Overlapping (See Screenshots)

Text is Overlapping in Safari, Suddenly:

Right now, when I am typing something in the address bar, it is overlapping what is already there. As a result, I cannot read the Address Bar clearly. Anyone else having this issue?

It is currently occurring on my Mac mini 2018

Screenshot of Typing a Different URL:

Typing the Same URL:

And, if I type the same URL , it overlaps itself. Here, I am typing the Apple Support Community page: https://discussions.apple.com/welcome

Screenshot of Typing the Same URL:

Posted on Aug 2, 2021 7:22 PM

Posted on Aug 3, 2021 1:30 PM

Hi TheLittles,

Thanks for posting in Apple Support Communities.

We understand that text is overlapping in Safari. Force close Safari, launch while holding the Shift key. Check to see if this behavior occurs in other browsers. If this behavior continues, restart your Mac in safe mode. Launch Safari. Safe mode runs a check on the startup disk, while limiting software that's allowed to run. See S tart up your Mac in safe mode .

Loading page content

Page content loaded

Aug 3, 2021 1:30 PM in response to TheLittles

Aug 3, 2021 1:48 PM in response to barberlives123

Thank you kindly barberlives123 for your reply.

Random Boot Fixed it:

The issue went away powering on my Mac this morning (my time). Wouldn't go away 12 hours ago. Tried Safe Mode , a new user, and a bunch of other things last night that I'd recommend to others. Nothing fixed it. So, I took the night off, and then powered my Mac up this morning. No issues since. Probably in issue with the caches. Not certain, though.

Sep 3, 2021 4:17 PM in response to barberlives123

Haven’t had the issue for month. So, clearing the caches did the job.

Overlapping bottom navigation bar despite 100vh in iOS Safari

»100vh« may not behave as expected for some mobile browsers and the bottom of your content will be partially hidden behind the browser’s bottom bar (i.e. below the »fold«).

First of all, let’s have a look at the issue by checking out the following example. It’s a simple page with 2 absolutely positioned boxes in the top left corner ( .top ) and the right bottom corner ( .bottom ). These boxes are wrapped within an element ( .container ) with a width of 100vw and a height of 100vh . You may have something similar in your project, such as a fullscreen modal/lightbox with a header/footer.

This should span accross the full viewport, right? Well, in the left screenshot below, you can see that in iOS Safari the bottom navigation bar actually overlaps your content, i.e. your content is below the »fold«—although you may have expected that it’s not part of the viewport.

In the right screenshot, you can see how one would expect the layout to be. The container spans between the top address bar and the bottom navigation bar.

This is a well-known issue and unfortunately intentional, as it prevents other problems, as Benjamin Poulain explained in his reply to a WebKit bug ticket regarding this issue.

This is completely intentional. It took quite a bit of work on our part to achieve this effect.

The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).

It is hard to show you the "looks like shit" part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.

Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.

From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

So, it’s not a bug—and no fix is planned for this.

Luckily, this doesn't have to be the most depresssing answer ever. How do we go on from this? There’s a couple of solutions.

Depending on your use case, it may be enough to simply use 100% instead of 100vh , especially for fixed/sticky elements (as 100% will be relative to the »real« viewport).

However, if your element is nested somewhere in the DOM, this may not work out (as 100% will be relative to the parent elements which are only as tall as the content they contain). And that may have been the motivation why you wanted to use 100vh in the first place.

stretch / -webkit-fill-available

Intrinsic and extrinsic sizing is a new CSS functionality that extends the sizing properties with keywords that represent content-based »intrinsic« sizes and context-based »extrinsic« sizes. This allows CSS to more easily describe boxes that fit their content or fit into a particular layout context.

One of these keywords is stretch which formerly was known as fill , fill-available , and its prefixed spin-offs -moz-available and -webkit-fill-available . We can make use of this functionality and because CSS skips over style declarations it doesn’t understand, we can implement fallbacks for all of these possible implementations.

(Hint: Autoprefixer will compile stretch to -webkit-fill-available and -moz-available automatically.)

JavaScript is always the »last stronghold« for stuff that’s not possible with pure CSS. Using CSS variables, you can pass the value of window.innerHeight into your CSS and update this variable every time the viewport is resized.

In your CSS, you can consume this variable as follows.

If you can’t use CSS variables in your project (e.g. due to browser support concerns), you can also update the height of your affected elements directly from within your script.

Unfortunately, there isn’t a one-size-fits-all solution for this issue. You should try the aforementioned solutions top down and be very conscientious with your cross-browser/cross-device testing.

• Discuss on Twitter
• Edit on GitHub

• Web Development

Fixing the iOS Toolbar Overlap Issue with CSS Viewport Units

One of the most exciting aspects of web development in recent years has been the continued growth and improvement of CSS. Flexbox and grid revolutionized how we build webpage layouts. Custom properties (aka, CSS variables) opened up new possibilities for theming. Newer selectors like :has() , :is() , and :where() have lead to more powerful and concise CSS. Container queries are now a reality and looking ahead, native CSS nesting is on its way ( decisions concerning its syntax notwithstanding).

But all of these new and upcoming features means that CSS is becoming increasingly complicated. Inevitably, then, some new features might fall through the cracks and get overlooked. (Which is why I’m of the opinion that “full-time CSS engineer” ought to be a thing, but that’s a topic for another post.) Speaking personally, I’m still pretty ignorant concerning the benefits of newer color formats like hwb() and lch() . Which brings me to viewport units.

Put simply, viewport units allow you to size a page’s elements relative to the size of the browser’s viewport , which contains everything that is currently visible on a webpage. (The viewport is basically the browser window minus any UI elements like the navigation and search bar.)

Consider this very simple example:

The vh stands for “viewport height,” so an element set to 100vh will be 100% of the viewport’s height. If that element’s height is set to 50vh , then it’ll be 50% of the viewport’s height, and so on. The 100vh is often used when you want an element to fill up the entire browser window. For instance, I use this technique on special features (like my recent David Zindell post ) to make their headers fill up the entire viewport with a splashy image. This gives them some extra visual oomph that sets them apart from my “normal” posts.

Not All Viewports Are the Same

This approach works well except for one pretty prominent scenario. If you’re viewing such a layout in Safari on an iOS device, that 100vh element fills up the viewport, but its bottom portion is then covered by a toolbar that includes the next/previous navigation and other controls. (See Figure A.)

Note: Although I’m focusing on iOS Safari, this issue also occurs in iOS Chrome. It doesn’t occur in other iOS browsers like Brave, DuckDuckGo, Firefox, and Opera. (More on that in a moment.) I haven’t tested this in any Android browsers.

In other words, Safari doesn’t seem to take its own UI into consideration when drawing its viewport. Thus, a 100vh element doesn’t behave the way it seems like it should, i.e., filling up the space between the URL bar and the bottom toolbar. (Remember that a browser viewport is the browser window minus any UI elements.)

There are, of course, reasons for why Apple opted for this approach. And reading the developer’s explanation  — the viewport’s height changes dynamically because any toolbars disappear or minimize when you scroll — they seem perfectly valid. But that doesn’t mean I liked how it looked. It was hard to believe that this was still an issue the Year of Our Lord 2023.

Various Google searches returned different solutions, including some JavaScript-based workarounds . Using JavaScript to fix visual layout issues, however, always feels hack-y to me. Call me old-fashioned, but I like to keep my CSS and JavaScript nice and separate, and reserved for those things that they do best (e.g., CSS for layout, JavaScript for interactivity).

That aforelinked article also pointed me to Matt Smith’s article about -webkit-fill-available , which seemed promising at first. Unfortunately, it wasn’t applicable to my situation. I didn’t want the post header to simply fill up the entire available space because I also needed to take into account the height of my site’s header, which contains the logo, nav, and search.

Here’s what my original CSS looked like:

The site header is 6 rems high, so I use the calc function to subtract that from the 100vh to dynamically calculate the post header’s new height. But, as pointed out before, iOS doesn’t respond to 100vh the way you might think it would. What I really needed was a new type of CSS unit — and fortunately, I found it.

New Viewport Units

Back in November, Google’s Web.dev blog covered three new viewport units: the “large,” “small,” and “dynamic” viewport units . These units were created specifically to work with viewports whose size might change due to dynamic toolbars —  which was the exact problem I was facing .

• The “large” viewport units assume that any dynamic toolbars (e.g., Safari’s bottom bar) are retracted and hidden , and calculate the viewport’s size accordingly. (This is akin to Safari’s aforementioned default behavior.)
• The “small” viewport units assume that any dynamic toolbars are expanded and visible , and calculates the viewport’s size accordingly.
• The “dynamic” viewport units sit in-between the “large” and “small” units, and react automatically to the dynamic toolbar’s behavior.

At first glance, a “dynamic” viewport unit seemed like the solution. After all, who doesn’t like a web design that automatically responds, all on its own, to a given situation? With that thought in mind, I updated my CSS:

In addition to the original selector, I added a feature query via @supports that basically says if the browser recognizes and supports the height: 100dvh declaration, then run the following CSS. (This is an example of progressive enhancement , i.e., starting with the basics and then adding on more advanced code that modern browsers will recognize.) That CSS is virtually identical to my original CSS, except I’m now using 100dvh instead of 100vh . (The dvh stands for “dynamic viewport height.”)

The first time I loaded the page, the problem seemed to be solved: the post header now filled up the space between Safari’s toolbars without anything cut off or hidden. But then I scrolled a little bit.

When you scroll down in iOS, the browser’s toolbars disappear or reduce in size, thus increasing the height of the browser’s viewport. Conversely, scrolling back to the top causes the toolbars to reappear or return to their original size, thus decreasing the viewport’s height. This behavior caused some distracting (IMO) changes to the post header: the background image expanded while the text shifted down in response to the additional height.

Interestingly, this “dynamic” approach is the behavior employed by the iOS versions of Brave, DuckDuckGo, Firefox, and Opera. In other words, toolbar overlap appears to be a non-issue for them, at least as far as Opus is concerned.

So after giving it some more thought, I replaced 100dvh with 100svh  — i.e., the “small” viewport height — which assumes that any toolbars are always expanded.

Here’s my final code:

You can see the results — that is, the entire post header — in Figure B. Upon scrolling, the post header doesn’t take advantage of the increased viewport height, so it’s not a truly “full-height” element. However, it doesn’t have any weird shifting, either, but looks the same all the time. And I always prefer such stability in my web designs.

For what it’s worth, Firefox, Brave, et al . ignore the 100svh setting altogether, and instead, always stick with the “dynamic” handling of the viewport and post header heights. That’s a little frustrating, but since they represent a relatively minuscule amount of Opus ’ overall traffic, I’m not going to sweat it.

Final Thoughts

Along with the aforementioned color formats, viewport units are one of those aspects of CSS that has always felt rather abstract to me. (Then again, I still have trouble wrapping my mind around how srcset works, and that’s used all the time for responsive images.) The problems they seek to address have often seemed rather niche to me, compared to the issues that I’m trying to solve 95% of the time.

Of course, now I have to eat a little crow because I found myself in just such a “niche” situation. Which is to say, I’m glad that really smart people have spent time thinking through these situations, rarefied as they might seem, to find and propose potential solutions.

I’m also glad that browser makers are quick to implement them; browser support for these new viewport units is pretty good, with Opera being the only major holdout. (Which means that I’ll probably remove the @supports feature query in the not-too-distant future and use the 100svh as the default CSS.)

Finally, while Safari’s behavior was initially frustrating, I do believe they made the better choice concerning how to handle dynamic toolbars and viewport heights now that I’ve seen how Firefox et al . handle them. I’d rather have part of the design covered up by default (but fixable, if needed, with the right CSS) then see the page rearrange itself as you scroll. The latter behavior is unexpected and thus distracting, two things that can create a poorer user experience — which is something I try to avoid in every aspect of my designs.

Latest iOS 15 beta fixes the Safari address bar and lets you move it back to the top

A return to a more traditional design.

By Mitchell Clark

Share this story

Apple has updated Safari’s design in the latest iOS 15 beta (Developer Beta 6), making the address bar look and act more like what users are used to and giving you the option to put it at either the top or bottom of the screen. Safari’s redesign, especially on iPhones, has been controversial since it was first announced , but it seems like Apple is starting to walk back the floating design that’s persisted throughout the beta.

MacStories founder and podcaster Federico Viticci has posted screenshots of the new design on Twitter, showing off the changes. If the user chooses to have the address bar on the bottom, it sits above a row of controls, including back and forward buttons, a share button, and the tab button. (In previous versions of the beta, these buttons were one with the address bar.) If the user chooses the option to have the address bar at the top, Safari will look similar to how it did in iOS 14.

Apple has been tweaking and changing Safari’s new design since it made its debut in the first beta. The updates have been relatively small — buttons were added back into the address bar (making it a minefield of touch targets), and Apple made the address bar easier to get to when you’re typing in a URL or search term . However, the incremental updates haven’t appeased those calling for a return to a more traditional design, one that doesn’t include a floating element that hovers above a webpage’s content.

Options should help please those who (kind of) liked the change, and those who didn’t

The option to change where the address bar resides should please those who thought its new place at the bottom was a good one (regardless of how its actual design was executed), as well as those who prefer to have it at the top. It may make things tough for web designers, who will have to deal with the possibility of something butting up against either the top or bottom of their webpage, but it’s a nice option for users to have.

According to Viticci , the iPad version of Safari hasn’t changed with this update, though Apple introduced an option that more or less let you go back to a traditional design in Beta 4.

The little smart home platform that could

This is tesla’s riveting fix for recalled cybertruck accelerator pedals, zack snyder’s rebel moon movies are a fandom menace, how phish turned las vegas’ sphere into the ultimate music visualizer, the invisible seafaring industry that keeps the internet afloat.

More from Tech

Wyze cameras let some owners see into a stranger’s home — again

Here are the best Apple Watch deals right now

OpenAI can’t register ‘GPT’ as a trademark — yet

Sony’s portable PlayStation Portal is back in stock

Using Bottom Tab Bars on Safari iOS 15

Jun 17, 2021 (Updated Sep 23, 2021)

Apple recently announced the latest version of Safari on iOS 15 with a completely new design featuring a bottom floating tab bar. What does this mean for web developers and designers?

Safari on iOS has had a problem for a long time when it comes to building websites and web apps with bottom-aligned navigation due to the browser toolbar's dynamic height. As you scroll the toolbar disappears making any element that is fixed to the bottom of the screen look great, but as soon as you try to tap any link inside the browser toolbar appears again.

Sorry, your browser doesn't support embedded videos.

This makes for a really poor UX so designers and developers have mostly resorted to user "hamburger" menus instead. This is a shame as bottom tab bars increase discoverability by not hiding links behind a tap and are also easier to reach one-handed on todays large mobile devices.

Updates with Safari 15

Apple reverted some of these changes in the final iOS 15 release. The user can now choose between the old UI (top bar) or the new one. If they choose the new bottom bar UI it does not float as much greatly improving overlap issues. While you might not need safe areas anymore if you're lucky, I would still recommend to implement it as I've seen it cause issues anyways.

The new Safari 15 now has a tab bar floating at the bottom of the screen. At first it might seem like this makes it even harder to create tab bar navigations, and by browsing the web using iOS 15 it's easy to spot issues like this:

Fixing Tab Bar Overlap with Safe Areas

Thankfully solving this issue is very easy by using the env() CSS function together with safe-area-inset-bottom . This API was shipped with iOS 11 making it possible to customize how websites render when using devices with a notch. By inspecting pinterests code we can see that their tab bar has a fixed position anchored to the bottom, the relevant parts look something like this:

To respect the safe area and make sure that nothing from the browser UI overlaps let's add another bottom property with env(safe-area-inset-bottom) as a value. This function works like a CSS variable, returning the minimum amount of inset needed to keep your UI from overlapping with the browser's. We keep the old style rule as a fallback browsers that do not support it:

Now when scrolling nothing overlaps:

Be sure to use env() every time something is anchored to the bottom of the screen or overlap will likely appear. env() can also be combined with css calc() or min() and max() , so if your design needs more padding you can add it like this:

You can learn more about respecting the safe-area in this excellent article published on the webkit blog or Apple's WWDC session called Design for Safari 15 (Relevent part starts around 13 minutes in).

The best way to see if you got it right is to use a physical device with iOS 15, but if you don't have access to one you can download the Xcode 13 beta from Apples developer portal and use an iOS 15 simulator by going to Xcode > Open Developer Tool > Simulator

Tab Bar UX in iOS 15

Remember the issue in previous versions of Safari where you had to click twice when using bottom tab bars? Once for showing the safari toolbar and another tap for actually triggering your link? That is no longer an issue 🙌. Safari 15 now respects and follows links or buttons, which is a big improvement! Check out how much better Twitter's tabbar works when switching tabs on Safari 15:

Even if tab bars now technically work better than before we still have to consider the design and UX to create something that people understand and that looks good. The browser UI is now very bottom-heavy and placing more actions next to it might feel cluttered. What do you think? Let me know on twitter @samuelkraft .

I'm excited to see how everyone adapts to the new UI and if we will see a return of tab bars on the web or not.

Get an email when i write new posts. Learn animation techniques, CSS, design systems and more

Related posts

Dec 18, 2021

Dec 15, 2021

Sep 07, 2021

How to move Safari’s address bar on iPhone back to the top, just like it used to be

Revert one of Apple’s most drastic changes to the Safari interface in iOS 15 — here’s how to move Safari’s address bar on iPhone back to the top, like it used to be!

Apple creates a mess with a major Safari redesign in iOS 15

The pretty radical Safari redesign in iOS 15 was met with pretty universal criticism. The updated interface isn’t very intuitive, to begin with, with tabs and several other controls consolidated into a new floating bar at the bottom, basically ruining years of muscle memory.

This tabs-at-the-bottom interface is turned on by default when you upgrade your iPhone to the latest iOS software. This is to say, some people could very easily get confused by this interface to the point where they might lose confidence in the Apple browser.

→ How to stop Safari from matching iOS status bar to website header color

Surprisingly enough, though, Apple does let you switch between the address bar at the top, where it belongs, and the bottom, which is how Apple would prefer you use the browser.

How to put Safari’s address bar back to the top on iPhone

You can easily toggle between the address bar at the top/bottom in the Safari preferences within the Settings app or on-the-fly, by choosing relevant options from Safari’s “aA” menu.

Method #1: Safari settings

Visit the Safari section within the Settings app to quickly toggle between iOS 15’s new floating address bar at the bottom and the address bar at the top, like before.

• Open the Settings app on your iPhone.
• Choose “Safari” from the root list.
• Choose the desired layout for Safari’s address bar underneath the “Tabs” heading.

The following layouts are available for your choosing here:

• Tab Bar: The new default, repositions the address bar to the bottom
• Single Tab: Choose this to get the old Safari interface back

And this is what the preferences for those Safari settings look like.

You can also switch between the top and bottom address bar without leaving Safari.

Method #2: aA menu

Apple in its wisdom has opted to add the same address bar toggle to Safari’s “aA” menu, letting you change your preferred URL bar layout without having to switch to the Settings app.

How to use Safari’s new address bar at the bottom

Choose the “Single Tab” setting to relocate Safari’s address bar from the top to the bottom.

It actually now floats, right above the section where your navigation controls and the Share, Bookmarks and Tabs buttons are located. The address bar controls are the same as before, from left to right: the “aA” button, the site URL and the Reload button. For reference, iOS 15 collectively refers to the address bar and navigation controls as “toolbar”. In iOS 14 and earlier, according to a support document on Apple’s website , this toolbar was known as “tab bar”.

Like before, you can touch and hold the “aA” button to quickly enter Safari’s Reader mode, where available. When touched once, the button pulls up a contextual menu with additional controls: Website Settings, Request Desktop Website, Downloads and so forth.

Touching the website address lets you enter a new URL to visit. Alternatively, enter search phrases here and press the Enter key to run the query through your default search engine.

Touching the Reload button cancels/reloads the current website—again, just like before.

Touching and holding the URL or the Reload button brings up yet another menu with the Copy, Paste and Search and Voice Search options, followed by relevant controls for tab groups if any.

When scrolling a webpage, the address bar automatically disappears. To bring it back up, start scrolling again. To manually hide the address bar and navigation controls — again, this is known as “toolbar” — choose the option labeled “Hide Toolbar” from the browser’s “aA” menu.

Hiding the toolbar is especially useful for those times when you’d like to browse your favorite websites in fullscreen mode. To make the toolbar reappear, simply touch the address bar.

There’s one distinct advantage to having a floating address bar at the bottom: quick tab selection. Swiping across it to one side or the other will instantly swoosh the next open tab into view. Folks with newer iPhones will feel right at home because swiping across the bottom horizontal line on Face ID-equipped iPhones cycles between open apps.

Like before, you can also hit that Tabs button for a bird’s eye overview of any open tabs.

And that’s pretty much everything you need to know about navigating the redesigned Safari interface in iOS 15 and switching between the top and bottom address bar on your iPhone.

Advice: Do give the bottom address bar a try

If you’ve closely followed iOS 15 development by living on betas, your opinion on the bottom address bar in Safari is already formed and not very flattering, we suppose. Nevertheless, we’d still like to recommend giving it another try and see if you find it useful for specific scenarios.

I surf the web on my iPhone as much as anyone else. When I’m on the go, I want to use the phone with one hand so I can eat, drive or whatever using the other. This is the situation that warrants having Safari’s URL bar at the bottom — at least this is what has worked for me so far.

What the bottom address bar also enables me is get to Safari’s Reader settings and other contextual options in the “aA” menu without having to invoke Apple’s Reachability feature. But perhaps more important than that, this layout allows me to easily cycle through open tabs just by swiping across the bottom address bar, saving me lots of time.

Maybe you’re someone who’s struggling to find their way around in Safari having just upgraded to iOS 12. Or perhaps you’re new to Safari or iPhone. In that case, we sincerely hope you’ll find this tutorial useful and we’d appreciate it if you shared it with your friends and support folks.

Here’s how you can move the Safari URL bar back on top in iOS 15

You can essentially get ios 14-looking safari on ios 15.

Compared to Android 12’s ‘ Material You ,’ Apple’s iOS 15 update didn’t bring as many visual changes to the iPhone’s interface, and the ones that it did add don’t seem to be highly appreciated. One of the not-so-well-received updates is the Safari redesign.

With iOS 15, Apple decided to move the address bar tools from the top of the screen to the bottom, right above the ‘Share,’ ‘Tabs’ and ‘Bookmark’ tools, a change that didn’t bode well with long-time Safari users whose fingers would automatically race towards to top of the screen to access the address bar.

Along with the repositioning of the top bar, Safari now automatically tints the address bar and matches it to the website colours. The latter is a change that I sincerely appreciate because of the unified look it provides, and the former I shun because it messes with my muscle memory.

Luckily, there’s a simple workaround that can allow you to move the address bar back to the top and disable it from tinting:

From Safari

Open a new tab in Safari and tap on the ‘aA’ tool located on the left of the address bar. A new pop-up menu will open where you can select ‘Show Top Address Bar.’ Tap it, and you’ll notice that the address bar moves to the top. Follow the same steps and tap on ‘Show Bottom Tab Bar’ to bring the address bar back to the bottom, if you’re feeling adventurous.

From Settings

You can also find an option to move the address bar from your iPhone’s settings. Head to settings, scroll down and tap on ‘Safari.’ You’ll see a toggle that lets you switch between the top and bottom address bar.

Website Tinting

While I believe that Website Tinting the address bar is a solid new addition to Safari, and I will be keeping it toggled on, those who want the authentic iOS 14 experience can disable the feature by heading to Settings -> Safari -> and tapping the Website Tinting toggle.

Related Articles

New on disney+ canada: may 2024, where to stream the best john candy movies in canada, the best way to buy a refurbished phone in 2024, here’s everything we know so far about google’s pixel 9 series, the top technology news, delivered to your inbox every friday..

By submitting your information via this form, you agree to receive electronic communications from MobileSyrup, a division of Blue Ant Media Inc., containing news, updates and promotions regarding MobileSyrup's products. You may withdraw your consent at any time.

• About Us / Tips
• Smartphones
• Tablets & Computers
• Apps & Software
• Accessories
• Buyers’ Guide
• How-to’s
• Security & Privacy
• 5G & Infrastructure
• Tech Effect

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

iOS 15 Safari Guide: Tabs, Extensions, Search Bar, and Other Changes

Apple's Safari app has undergone a number of changes during the iOS 15 beta testing process. Apple started out with a radical new design that moved the address bar from the top of the app's interface and introduced a floating tab bar, but after a multitude of complaints, there were several redesigns that culminated in an option to undo the iOS 15 design entirely.

Design Changes

Safari started out with a new floating tab design that moved the address bar and tabs to the bottom of the iPhone interface, but now the design change is optional.

You can get to webpage settings by tapping on the Aa, or reload a page by tapping on the reload button. With this Tab Bar interface, when you scroll through a webpage, the entire Tab Bar collapses down so you can see more of the website. You can bring it back up with a tap.

If you choose "Single Tab" instead of "Tab Bar," the address bar and tabs will remain at the top of the Safari window, which is how iOS 14 works. The design of the Single Tab option is unchanged from iOS 14, with the same control bar available at the bottom of the interface. You can't swipe through tabs using the Single Tab interface and will instead need to use the Tab Switcher.

You can swap between the bottom Tab Bar and the Single Tab interface by tapping on the "Aa" button that's next to any URL.

• How to Move iOS 15 Safari's Address Search Bar Back to Top

Website Tinting

Available in the Settings app, Allow Website Tinting matches the collapsed Safari address bar interface to the website's colors to make it blend in better with the background.

• How to Turn Off Website Tinting in Safari

Landscape Tab Bar

With the new Landscape Tab Bar setting, when you use your ‌iPhone‌ in landscape mode with Safari, you'll see a Mac-style tab bar that shows all of your open tabs, and you can swipe through them.

Pull to Refresh

A downward swipe on any webpage in iOS 15 will refresh the page, and this is an alternative to having to tap on the reload icon.

• iOS 15: How to Quickly Refresh a Webpage in Safari

Tabs in iOS 15 can be saved into Tab Groups, which offers a way to preserve a set of tabs you have open without having to have those tabs active.

To make a Tab Group, just open up all of the websites that you want to include, tap on the Tabs button with the down arrow, and then tap New Tab Group from [#] Tabs. You can also use this option to create a New Empty Tab Group that tabs can be added to later. Long press on any open tab (or the main address bar if you have the single tab view enabled) to add it to a Tab Group.

To load up a Tab Group, tap on the Tabs button and then tap on the name of the group in the list. All of your Tab Groups sync across your devices so you can access them on iPhones and iPads running iOS and iPadOS 15 as well as on Macs running macOS Monterey.

• iOS 15: How to Use Tab Groups in Safari

Tab Overview Grid

In iOS 14, all of your open tabs are displayed in a card-like interface that you can swipe through, but in iOS 15, open tabs are displayed in a grid view.

Customizable Start Page

Safari is more customizable in iOS 15, and you can edit what's available on your start page. This is a feature that has been available on macOS, but is now also available on iOS devices.

You can choose to have the start page show Favorites, Frequently Visited sites, Shared With You content, Privacy Report info, Siri Suggestions, Reading List, and iCloud Tabs.

There's an option to use the same Start Page appearance across all devices, and a toggle to upload the background image of your choice.

• iOS 15: How to Customize Your Safari Start Page

Intelligent Tracking Prevention Improvements

With updates to Intelligent Tracking Prevention, the feature that keeps websites from tracking your web activity, trackers are now blocked from accessing your IP address to build a profile on you.

• iOS 15: How to Hide Your IP Address From Trackers in Safari

HTTPS Upgrade

Safari in iOS 15 automatically upgrades sites that are known to support HTTPS from HTTP, which is insecure.

iCloud Private Relay

‌iCloud‌ Private Relay is a privacy feature that makes sure all of your Safari traffic is encrypted.

As explained in our privacy guide , ‌iCloud‌ Private Relay protects your IP address and de-links it from the websites that you visit by utilizing two separate internet relays.

By having a two-step process that involves both an Apple server and a third-party server, ‌‌iCloud‌‌ Private Relay prevents anyone, including Apple, from determining a user's identity and linking it to the website the user is visiting.

With this system, Apple knows your IP address and the third-party partner knows the site you're visiting, and because the information is de-linked, neither Apple nor the partner company has a complete picture of the site you're visiting and your location, and neither does the website you're browsing. Normally websites have access to this data and combined with cookies, can use it to build a profile of your preferences.

Web Extensions

Safari in iOS 15 supports web extensions, with web extensions able to be downloaded and installed through the App Store . Available extensions include content blockers, VPNs, and more.

• iOS 15: How to Download and Install Safari Web Extensions

With iOS 15, iPhones and iPads are able to use a new Live Text feature to detect text in any image, and this includes images that you find in Safari.

• How to Copy and Paste Text From Photos
• How to Translate Text in Photos

Shared With You

Shared With You, a new option available on the Safari start page, aggregates all of the links that you've been sent in the Messages app and other social networking apps that support the Shared With You feature.

Guide Feedback

Have questions about the new Safari changes in iOS 15, know of a feature we left out, or want to offer feedback on this guide? Send us an email here .

Get weekly top MacRumors stories in your inbox.

Top Rated Comments

The landscape view in MacRumors looks amazing! Safari looks so modern now. Just brilliant!

Easier to refresh now.

Popular Stories

PlayStation, GameCube, Wii, and SEGA Emulator for iPhone and Apple TV Coming to App Store

Delta Game Emulator Now Available From App Store on iPhone

12.9-Inch iPad Air Now Rumored to Feature Mini-LED Display

All iPhone 16 Models to Feature Action Button, But Usefulness Debated

Next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

App Store changes for the EU, new emoji, Podcasts transcripts, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Revamped models with OLED displays, M3 chip, and redesigned Magic Keyboard accessory.

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

Other Stories

21 hours ago by MacRumors Staff

2 days ago by MacRumors Staff

3 days ago by MacRumors Staff

• iPhone 15 Pro Max

iOS 15: How to put the Safari address bar back to the top on your iPhone

Read in other languages:

On iOS 15, Apple has moved the address bar of its Safari app to the bottom of the screen of its iPhone and iPad. If you don't like this new design, you can easily put the address bar of your Safari browser back at the top of your iPhone screen.

The idea behind this choice by Apple is to make Safari's interface more ergonomic on iOS 15 and iPadOS 15 . The search bar has been lowered so you don't have to stretch your finger to reach the top of the screen. But after years of getting used to having the address bar at the top, this turnaround may be counterintuitive for some.

• Check out our selection of the best iPhones to choose in 2022 to use Safari with the bar up or down

So, to put the Safari application address bar back to the top of your iPhone screen, you need to:

• Go to Settings .
• Press  Safari .
• Among the two options - Tab bar or Single tab - choose  Single tab .

In any case, you can switch between the new and old systems as you like. And if you change your mind, want to switch back to the address bar at the top, you can make this change in a faster way, directly in Safari and without going through Settings:

• In the Safari  application.
• Press the aA button on the left of the address bar.
• In the contextual menu, press Show Top Adress Bar .

That's it for this quick tutorial to put the Safari app's address bar back to the top of the screen on your iPhone. Did you find it helpful? Do you want us to do more iOS 15 tutorials? Top or bottom search bar, which is more ergonomic for you?

Comparison: The best foldable phones

• Learn more about each phone featured in the best foldable phones list

Antoine Engels Senior Editor

Black belt in specs sheet analysis. OnePlus fanboy in (slow) remission. Average estimated reading time of my articles: 48 minutes. Tech deals fact-checker in my spare time. Hates talking about himself in the 3rd person. Dreams he was a gaming journalist in another life. Doesn't get the concept of irony. Head of editorial for NextPit France.

• Submit Cancel

Recommended editorial content

With your consent, external content is loaded here.

By clicking on the button above, you agree that external content may be displayed to you. Personal data may be transmitted to third-party providers in the process. You can find more information about this in our Privacy Policy .

• TripAdvisor

Vina Mercato an Italian Style Market  is Open 

Tuesday to Saturday from 11am to 4pm

Dinner service Only

Tuesday to Saturday from 5pm until 9pm

Buon Appetito

Email Signup

Blue Peel & Stick Roll

See More by The House of Scalamandre

Rated 4.8 out of 5 stars.

• Play Mute Mute Closed Captions Full Screen

Get it between

Thu. Apr 18 – Sat. Apr 20

Select Color:

How much do you need?

Total Price: $57.99 at $57.99 per roll, or 30.75 sq. ft.

What We Offer

Quick-Ship Samples

Order a sample to see and feel the product before buying.

Product Overview

Peel & Stick

Description

• Easily repositionable while installing.
• Ideal for rental or home decorating.
• NuWallpaper is safe for walls and leaves no sticky residue behind.
• NuWallpaper sticks to any smooth, flat surface - perfect for DIY projects.
• Peel and stick to apply, pull up to remove.

Weights & Dimensions

Other dimensions, specifications, about the shop.

Rated 4.7 out of 5 stars.

Scalamandré is a heritage American textile brand rooted in luxury and high-end design since its inception in 1929.

More About This Product

Compare similar items.

Peel & Stick Roll

by The House of Scalamandre

Rated 4.5 out of 5 stars.18 total votes

Peel & Stick Animal Print Roll

by Daisy Bennett Designs

Rated 4 out of 5 stars.28 total votes

Rated 4.5 out of 5 stars.37 total votes

Ardingly Peel & Stick Abstract Roll

by Mercer41

Rated 4 out of 5 stars.47 total votes

Zebra Peel & Stick Double Roll

Rated 5 out of 5 stars.2 total votes

Frequently Bought Together

Shrout 4 - Light Wood Drum Chandelier

by Dakota Fields

Rated 4.8 out of 5 stars.6 total votes

Armande Fabric LED Flush Mount

by Joss & Main

Rated 4.7 out of 5 stars.1969 total votes

Lorise 10 - Light Dimmable Sputnik Sphere Chandelier

by Orren Ellis

Rated 4.7 out of 5 stars.655 total votes

Savita Flush Mount

Rated 4.5 out of 5 stars.1701 total votes

Render Bathroom Vanity by Modway

Rated 4.7 out of 5 stars.1059 total votes

Laurie 2 - Light 14.75'' Carved Crystal Drum Semi Flush

by Kelly Clarkson Home

Rated 4.7 out of 5 stars.1553 total votes

Parlez 3 - Light Dimmable Vanity Light

by Etta Avenue™

Rated 4.7 out of 5 stars.299 total votes

Payson 3 - Light Dimmable Vanity Light

by Greyleigh™

Rated 4.7 out of 5 stars.214 total votes

Compatible Products

Laura Ashley Installation Tools

by Graham & Brown

Rated 5 out of 5 stars.10 total votes

Installation Tools

by York Wallcoverings

Rated 4.4 out of 5 stars.27 total votes

Ratings & Reviews

Our Community Guidelines help customers write honest reviews.

Show reviews that mention

Showing 1-10 of 18 reviews.

Jupiter, FL

Verified Buyer

Rated 3 out of 5 stars.

I love it BUT Make sure you do the right measurements because I had a lot of excess that couldn’t be repeated. I also had to reorder two more additional rolls because of this mistake. This cost me more money than I would have wanted to pay.

Nashville, TN

Rated 5 out of 5 stars.

So easy to use. Bought grey. Love it!

Caledonia, MI

It’s difficult to apply to wall. See many bubbles snd grooves in it.

Palo Alto, CA

This wallpaper is so forgiving. It was hard to install, but I could try multiple times, which made it possible to get it right. Now that it’s up I love it!!

Mt Pleasant, SC

Perfect! The navy background is great!

riegelsville, PA

Verified Business Professional

I am so thrilled with my wallpaper. As a native New Yorker, as soon as I saw this pattern, I thought SWIFTY'S! Part of the New Your scene. I wanted it in orange but that wasn't peel and stick. I needed something easier so I bought the blue version and it is simply amazing. Luckily, I can make my own crab cakes so hope I can live up to the tradition! Update on wallpaper. I am no longer happy. It shrinks terribly and doesn’t stay stuck on walls. My wallpaper professional was the best so I know it wasn’t her . The paper shrunk so much that now I have the wall showing through and I have to redo it with non stick wallpaper. Do not buy!!!!

Duxbury, MA

Neighbors Program

Fun paper and easy to work with!

beautiful! Easy to put up.

Franklin, NC

Beautiful and stunning?

I have not put up the paper yet, but the quality of the item is excellent- heavy, great print and color quality, really gorgeous.

Shipping & Returns

Free shipping, available delivery options:.

Ground Delivery

Expedited Delivery

Your order means a lot to us. That’s why we offer fast, safe and reliable delivery options for every item.

30-Day Return

Not loving it? We offer returns for most items within 30 days of delivery for a refund or store credit.

Customers Also Viewed

Chinar Animal Print Roll

by Beachcrest Home™

Rated 5 out of 5 stars. 15 total votes

Wild spirit. This non-pasted wallpaper brings a bold, playful feel to your accent wall. A herd of zebras creates a repeating pattern with a nature-inspired look and a classic black-and-white hue. Made from non-woven paper with a smooth texture, this paper features a semi-gloss finish that adds visual interest to your wall. Installation is easy: Prep your desired wall with wallpaper adhesive (sold separately), press the paper onto a smooth surface, and align the pattern from panel to panel. Our favorite? This paper is and washable, so it's easy to care for.

• Unpasted non woven wallpaper
• Straight match

Menagerie 20' L x 27" W Peel and Stick Wallpaper Roll

by Rifle Paper Co.

Rated 4 out of 5 stars. 97 total votes

Inspired by the work of early 20th-century modern artists, the print is complete with illustrated animals roaming through a forest of stylized flowers and trees.

• Premium non-woven matte luxury finish.
• Printed on responsibly sourced.
• Apply to any smooth, clean, flat surfaces.

Britiany Peel & Stick Floral Roll

by Canora Grey

Rated 4 out of 5 stars. 268 total votes

Paying homage to the Arts & Crafts Movement, this Aves Garden peel and stick wallpaper from Canoga Grey captures one of nature's garden bandits perched upon strawberry bushes and will bring the beauty of the outdoors into your next decor project! Printed on a smooth vinyl, our self-adhesive designs are perfect for renters and homeowners looking for an instant, DIY transformation to their interior space. With the same qualities and durability as permanent wallpaper, our products offer an easy, fresh alternative to decorating with very little commitment. No water, no mess, no sticky residue!

• Peel and stick to any smooth, flat surface without any water or mess
• Easy to apply, repositionable, and 100% removable without any sticky residue left behind
• For best performance, we recommend overlapping seams by 1/16 in. rather than trying to butt-fit the vinyl
• This peel and stick wallpaper does not have grid lines on the back. Wall surfaces are typically not perfectly straight so the wallpaper should be trimmed on the wall to fit for a seamless look.
• Order enough rolls to complete your project; separate purchases of the same item will likely yield shipment of different print batches which will result in slight color variations between rolls

Brynn Peel & Stick Roll

by Birch Lane™

Rated 4 out of 5 stars. 96 total votes

Adorn your walls with this neutral hand-painted design. With a marbled gry backdrop and white cranes, this wallpaper has a calming and serene look.

• Easily repositionable while installing
• Ideal for rental or home decorating

Floral Double Roll

Rated 4 out of 5 stars. 37 total votes

This traditionally inspired acanthus leaf damask features exotic leopards parading among the leaves.

• Requires a clear, non-staining, heavyweight premixed paste for installation
• Prepare walls with universal wallpaper primer before installation for easier removal (recommended)
• Breathable nonvinyl material sourced from managed forests

Zebras Roll

Rated 0 out of 5 stars.

A group of zebras is called a “dazzle,” and this season, the scalamandré dazzle is growing! We are thrilled to offer four new colorways of our iconic zebra wallcovering. Two sophisticated neutrals and two bold and cheerful hues add elegance, whimsy, and a touch of design history to any interior. From Gino’s restaurant in the Upper East Side of Manhattan to today’s homes, the zebra motif is truly a timeless design statement.

• Design: Bird/animal children.
• Hand printed. Wheat paste and liner paper are recommended.

Peel & Stick Abstract Roll

by Nikki Chu

Rated 4 out of 5 stars. 126 total votes

The rich heritage of South African tribal design is masterfully captured in this rectangular block key motif in Zulu Signature peel-and-stick wallpaper by Nikki Chu for RoomMates with its black background and jute beige layered roping effect cleverly stacked in chunky continuous rectangles.

• 100% removable peel-and-stick wallpaper
• No sticky residue was left behind upon removal

Bosse Peel & Stick Toile Roll

by Bay Isle Home™

Rated 4 out of 5 stars. 76 total votes

Walls become a backyard garden. This pattern, inspired by the natural world, gives any surface a dimensional look with little effort. Add architectural details to any space for an accent wall, full room makeover, furniture DIY, and more. Simply cut the peel-and-stick wallpaper to size, remove the backing, and stick it to any smooth, clean surface. Pull off the wall in full sheets when it’s time to redecorate: no sticky residue or damage left behind. Bring the natural world into your home with this peel-and-stick wallpaper.

• No water, no paste, no mess
• 100% removable peel-and-stick wallpaper.
• No sticky residue was left behind upon removal.
• Product may not adhere to unclean, textured, recently painted, or nonstick surfaces.
• Repositionable, washable, and strippable.
• Superior strength and properties to the regular contact paper.
• Perfect for both renters and homeowners.
• Product color may vary slightly due to lighting and computer monitors.

Daela Peel & Stick Floral Roll

by Red Barrel Studio®

Rated 5 out of 5 stars. 41 total votes

Exotic birds flutter around an enchanting landscape of weeping willows and plum blossoms in this zen bird garden peel-and-stick wallpaper pattern by Arthouse. Shadowed silhouettes complete the treescape, forming a nature-inspired design. Printed on smooth vinyl, our self-adhesive designs are perfect for renters and homeowners looking for an instant, DIY transformation to their interior space. With the same qualities and durability as permanent wallpaper, our products offer an easy, fresh alternative to decorating with very little commitment. No water, no mess, no sticky residue!

• Easy to apply, repositionable, and removable without any sticky residue left behind
• 20.5 in. W x 18 ft. L roll (approximately 30.75 sq. ft.)
• 20.87 in. design repeat, half drop pattern match
• For best performance, we recommend overlapping seams by 1/16 in. Rather than trying to butt-fit the vinyl

Zebras 16.5' L x 20.5" W Peel and Stick Wallpaper Roll

by Novogratz

Rated 5 out of 5 stars. 9 total votes

Playful Zebras are seen sharing a walk, skip, and maybe a kiss. A fresh pattern, on a white background, can uplift the mood of any room. The pattern was designed based on wallpaper found in The renovation project. After uncovering a wall in a nearly 200-year-old home, found deteriorating wallpaper. Donald Robertson was commissioned to create new artwork based on this nearly antique pattern. Novogratz wallpaper offers individuals the freedom to be creative with decorating, to embrace pattern, texture, and color, and to create bold and expressive interiors, without the worry of a long-term commitment. To apply, peel away the backing to expose the water-based adhesive. Press onto a smooth surface and align the pattern from panel to panel. Wallpaper prints are Type A fire-rated for flame spread and smoke development. The product works best when applied to surfaces that have been primed and painted with a satin or semi-gloss finish. Applications on flat and matte paints and textured surfaces are not recommended.

• Ready-to-use, DIY-friendly product. No pastes, glues, or installer needed.
• Repositionable and easy to align.
• Safe for rentals. Self-adhesive product removes cleanly without ruining paint or walls.
• Works on any smooth surface including stair risers, furniture, ceilings, drawers, and more.
• Bathroom-friendly. This steam and moisture-resistant product is perfect for bathrooms and high-humidity areas.
• Proudly produced in the USA.
• Wipe clean with a soft, damp cloth.

More to Explore

Related Searches

Hello,  beautiful!