No results found. Try again with different words?

Search must be at least 3 characters.

How to Remove the White Bars in the Safari Browser on iPhone X and Higher

The new iPhone X features a beautiful edge-to-edge display. But you might observe a small gap at the top of the browser.

When viewing the website in an upright (portrait) position, you will not notice this gap. But if you rotate your screen to horizontal (landscape) position mode you’ll notice white space on both sides of the screen.

In order to to avoid any such obstruction of the content, the iOS system restricts website display within a “safe area” on the screen.

On the websites, this results in letter-boxing on the left and the right.

You can read more about “ Positioning Content Relative to the Safe Area ” at official Apple website.

To avoid white bars around the browser you would need to extend the Safe Area. To do so you would need to add a custom code.

Simply adding “ viewport-fit=cover ” to your viewport meta tag will expand your site to fill the entire screen and not just the safe area.

Here is a custom code that you will need to add to your website –

Your website would look something like this as a result:

As you can see, the white spaces on left and the right side of the screen were removed.

How To Add Custom Code To Your Website

There are two ways to add this code to your website –

1. With Custom Layouts (Astra Pro)

Custom Layouts is an Astra Pro module. This means that for this method you would need to have your Astra Pro addon installed and activated. Follow these  steps to add the code with Custom Layouts: 

Activate the Custom Layouts module at Appearance > Astra Options > Astra Pro modules .

Navigate to Appearance > Astra Options > Custom Layouts and add a new Custom Layout.

On the next step, click “Enable Code Editor” to activate it.

Insert the code in the Code Editor.

Scroll down to the Settings and set the following options:

  • Layout: Hooks
  • Action: wp_head
  • Display On: Entire Website

Publish the layout.

2. With Astra Hooks Plugin

If you’re using the only Astra Theme without an Astra Pro addon, you can add this code using the Astra Hooks plugin. Just go to Dashboard > Plugins > Add New , find Astra Hooks, install and activate it.

Once the plugin is activated follow these steps:

Open your Customizer ( Dashboard > Appearance > Customize )

In the Customizer, go to Hooks > Header

Add the code to the wp_head section and Publish

That’s all!

Your website will now look great on iPhone edge-to-edge screens too.

Related Docs

  • How to Create a Button with a Link
  • How to Add Images or Icons in the Navigation Menu
  • Fix Mobile Usability Issues on Astra
  • How To add Custom CSS for Specific Pages
  • How To Fix Not Being Able To Edit Submenu Colors, Above and Below Header?
  • How to create a correct format svg logo?
  • Using Advanced Custom Fields with Astra
  • How to add a wishlist button to your WooCommerce Website
  • Mixed Content
  • Improved Block Editor Experience with Astra

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Now choose your preferred page builder addon

  • Home New Posts Forum List Trending New Threads New Media Spy
  • WikiPost Latest summaries Watched WikiPosts
  • Support FAQ and Rules Contact Us

A White line Appear on the Screen of My New Macbook Air

  • Thread starter alchemist9
  • Start date Sep 15, 2013
  • Sort by reaction score
  • MacBook Air

macrumors newbie

  • Sep 15, 2013

Hi, I just bought my Macbook Air a week ago. This is my first apple laptop. I'm quite satisfied with its overall performance. But occasionally, when I open a new window, a white (or slightly colorful) thin line appears on the screen. It gets disappear when I switch to another window. Here is an example https://docs.google.com/file/d/0B3292dIz9C_5cFVGT1pMbktrMkU/edit?usp=sharing So I'm just wondering, is there some problem with my machine? Does anyone encountered the same problem before?? PS. Mine is 2013 version i5 256G with 8GB memory.  

macrumors regular

I noticed a line as well on my 2013. It comes up every time I have a minimized window and go into app expose. It looks like a poorly done border to me.  

LovelyPenguin

Feel sorry for that. I myself had the exact same problem. Twice. I called the service center, and replaced my Air twice. To me, it happened when I start my Air, or when minimize any windows.  

macrumors 6502a

Same issue with my mba 2013.  

macrumors 601

  • Sep 16, 2013

I've had the same thing happen as well. It briefly flashes and disappears. Personally, I find it only a tiny bit annoying, but not enough to do anything about it.  

Omen87

Y So Jelly said: I noticed a line as well on my 2013. It comes up every time I have a minimized window and go into app expose. It looks like a poorly done border to me. Click to expand...

Dirtyharrydev

Macrumors member.

  • Dec 31, 2013

mynameis321

  • Jan 1, 2014

I also have this issue, however I would find it hard to replicate it to warrant a repair. Is it worth going in for a repair?  

I did send a written desceiption of the error and the aasp did tell me that they THINK that it's something wrong with the GPU and needs to replace the logicboard.  

Jefe's MacAir

Jefe's MacAir

I've seen it as well. As stated, it's difficult to replicate on demand. 2013 MBA.  

gooostovo

I've had this issue as well. It's only happened a few times but there have been updates since the last time I saw it and don't really care as long as the whole LCD goes bad. Then I will take it in for service.  

allan.nyholm

allan.nyholm

Macrumors 68020.

I have the same or similar issue. I've attached an image of what I saw the other day within Safari bookmarks. It's a MacBook Air 13" upgraded to 8GB RAM - so not stock but that's the only change from stock MacBook Air 13".  

Attachments

13884280621192645.jpg

macrumors 68000

take it back for an exchange! hopefully you will receive an Air with a different display. panels are made by Samsung, LG and AU Optronics - the last one is the best  

  • Jan 3, 2014
halledise said: take it back for an exchange! hopefully you will receive an Air with a different display. panels are made by Samsung, LG and AU Optronics - the last one is the best Click to expand...
  • Jan 5, 2014
mynameis321 said: Only possible if the laptop isn't a custom to order build, since they won't stock your exact one in the store. Which means that the you'll have to hand yours in repair which might take weeks Click to expand...

d3ath

I can also confirm that the white line has happened to me but only for half a second then it disappeared. 2013 13" MBA, just bought it yesterday at Best Buy.  

michaelsviews

michaelsviews

Macrumors 65816.

  • Jan 6, 2014
alchemist9 said: Hi, I just bought my Macbook Air a week ago. This is my first apple laptop. I'm quite satisfied with its overall performance. But occasionally, when I open a new window, a white (or slightly colorful) thin line appears on the screen. It gets disappear when I switch to another window. Here is an example https://docs.google.com/file/d/0B3292dIz9C_5cFVGT1pMbktrMkU/edit?usp=sharing So I'm just wondering, is there some problem with my machine? Does anyone encountered the same problem before?? PS. Mine is 2013 version i5 256G with 8GB memory. Click to expand...
  • Jan 7, 2014

Has anyone noticed that the issue has just gone away on its own. I know I used to get the lines every once in a while when the machine was new. But now it's almost 6 months old and I can't remember seeing it since before I last posted in this thread (Sept). I feel pretty confident to say that it's not a software issue as an update surely would have fixed this by now. That means that it's something with the hardware, either the screen or GPU. But perhaps it just needs a burn-in period. It doesn't look like this is a major issue either. A quick google search only turns up this one thread, and there's only a handful of us that have posted about it.  

  • Jan 9, 2014
jdechko said: Has anyone noticed that the issue has just gone away on its own. I know I used to get the lines every once in a while when the machine was new. But now it's almost 6 months old and I can't remember seeing it since before I last posted in this thread (Sept). I feel pretty confident to say that it's not a software issue as an update surely would have fixed this by now. That means that it's something with the hardware, either the screen or GPU. But perhaps it just needs a burn-in period. It doesn't look like this is a major issue either. A quick google search only turns up this one thread, and there's only a handful of us that have posted about it. Click to expand...

I never seen that line on my MBA. o_o  

Never had the line on screen. Though I don't use App Expose that often. I mainly CMD+Space Bar to open my apps.  

  • Jan 15, 2014

I also got this also have lines inside the frame in menus, it's limited to finder only. Got my case esc to apple eengeners, 'll replay bacl after they have analyzed my logfiles.  

If Safari isn't loading websites or quits on your iPhone, iPad, or iPod touch

If you can't load a website or webpage, or Safari quits unexpectedly, follow these steps.

Connect to a different network

Try to load a website, like www.apple.com , using cellular data. If you don't have cellular data, connect to a different Wi-Fi network , then load the website.

If you're using a VPN (Virtual Private Network), check your VPN settings . If you have a VPN turned on, some apps or websites might block content from loading.

Restart your device

Turn off your device and turn it on again.

Restart your iPhone

Restart your iPad

Restart your iPod touch

Clear website data

You can clear website data occasionally to improve Safari performance.

Go to Settings > Safari.

Tap Clear History and Website Data.

Tap Clear History to confirm.

Turn on JavaScript

Turn on JavaScript if it's not already on.

Go to Settings > Safari > Advanced.

Turn on JavaScript.

Get more help

If the issue continues and only affects a certain website or webpage, check if you have Private Relay turned on. You can temporarily turn off Private Relay in iCloud Settings . If Safari still doesn't load websites and you tried all of these steps, contact the website developer for more help.

safari google white line

Explore Apple Support Community

Find what’s been asked and answered by Apple customers.

safari google white line

Contact Apple Support

Need more help? Save time by starting your support request online and we'll connect you to an expert.

  • Help Center
  • Pixel Phone
  • Privacy Policy
  • Terms of Service
  • Submit feedback
  • Troubleshoot

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

mabg94

safari screen has grey screen over site and i cannot access the page. Address bar is accessible and will go to different sites, but i cannot access the site. what can i do to solve this?

The Safari screen has a grey overlay which won't allow me to access the page. The address bar is clear and active; that is, I can change addresses and it will go to the new location but I cannot access the page below the grey screen. What can I do to fix this?

iPad 2, iOS 4.3.3

Posted on Sep 19, 2012 8:21 AM

Demo

Posted on Sep 19, 2012 8:23 AM

Start with the last suggestion.

1. Quit the app completely and restart the iPad. Go to the home screen first by tapping the home button. Double tap the home button and the task bar will appear with all of your recent/open apps displayed at the bottom. Tap and hold down on any app icon until it begins to wiggle. Tap the minus ➖ sign in the upper left corner of the app that you want to close. Tap the home button or anywhere above the task bar. Restart the iPad.

Restart the iPad by holding down on the sleep button until the red slider appears and then slide to shut off. To power up hold the sleep button until the Apple logo appears and let go of the button.

2. Or .... Reset the iPad by holding down on the sleep and home buttons at the same time for about 10-15 seconds until the Apple Logo appears - ignore the red slider - let go of the buttons.

3. Go to Settings>Safari>Clear History, Cookies and Data. Restart the iPad. Restart the iPad by holding down on the sleep button until the red slider appears and then slide to shut off. To power up hold the sleep button until the Apple logo appears and let go of the button.

Loading page content

Page content loaded

Sep 19, 2012 8:23 AM in response to mabg94

King_Penguin

Try clearing Safari's cache : Settings > Safari > Clear Cache (Clear Cookies And Data on iOS 5) and also Clear History

If that doesn't fix it then try closing Safari completely and then re-open it : from the home screen (i.e. not with Safari 'open' on-screen) double-click the home button to bring up the taskbar, then press and hold any of the apps on the taskbar for a couple of seconds or so until they start shaking, then press the '-' in the top left of the Safari app to close it, and touch any part of the screen above the taskbar so as to stop the shaking and close the taskbar.

A third option is a reset : press and hold both the sleep and home buttons for about 10 to 15 seconds (ignore the red slider), after which the Apple logo should appear - you won't lose any content, it's the iPad equivalent of a reboot.

IMAGES

  1. How to Fix Safari Google Search Not Working On iPhone or iPad Solved

    safari google white line

  2. 23 tips to fix websites not loading in Safari on iPhone, iPad, & Mac

    safari google white line

  3. Safari can't open google maps website

    safari google white line

  4. The Easiest Way To Transfer Safari Bookmarks To Google Chrome

    safari google white line

  5. Google Chrome vs Safari

    safari google white line

  6. Tip: Reopen Accidentally Closed Tabs In Safari and Google Chrome

    safari google white line

VIDEO

  1. What color do mixed google and safari make?🪢 #colormixing #paintmixing #satisfyingart #asmart

  2. Taylor Google vs.Safari 🫶🏻🫶🏻#swift #swifties #taylorswift #love #viral #subscribe

  3. Safari Park Zip Line Installed By KMC

  4. White safari hill climb 😂😂#shortvideo #funnyvideo

  5. | A day in Safari Park

COMMENTS

  1. White bar through Google tab on apple pc

    There's a thick white line in the middle of the screen, on Safari On my Macbook Air, there's a thick white line in the middle of the screen, on safari, that prevents me from using the app [Re-Titled by Moderator] 469 1; 2 replies. Loading page content. Page content loaded. ... White bar through Google tab on apple pc.

  2. MacBook Safari Google had White bar i cant do none save me ...

    This can also be the cause of an adblocker which prevents google from showing the cookie notice banner. Try command + shift + R to do a hard refresh of the page. But first before you upgrade an OS make sure your computer is ready to do so (ie backup is current and check app incompatibility).

  3. How to remove white lines when viewing on iOS, Safari and Chrome?

    td {. vertical-align: top; } you will see that all white lines are on the bottom and it's a free space of every table cell. It's a feature of table render. Because height of any table cell is affected by the table cell with maximum height. So you are wrong on using table layout. Use div s, for example.

  4. My safari browser on mac has a white horizontal line and

    Safari is the only browser I have on my computer at the moment and I can't download any other browser because I can not click onto anything I did have Firefox 2 but I tried to download the newer version which I clicked to replace the older version but it wouldn't open because I can't update my laptop

  5. Monterey Safari has white line in fullscreen : r/MacOS

    Exactly. But when you move the curser to the upper edge the menu bar will reappear in the same location but as white on black. That's the bottommost line of the menu bar. It happens on all Macs. The reason you observe it is that the new Macs with a notch limit the display the the below the notch area on full screen (otherwise the notch would be ...

  6. Thin white line at top of browser on safari tech preview Big Sur

    Thin white line at top of browser on safari tech preview Big Sur. Just tried the STP on Big Sur and there's a white line that's thin at the top of the screen when I'm in full screen mode. It's most apparent when the browser is mimicking a dark website, there's a small horizontal white line between the top of the browser and the top ...

  7. macos

    Here's a temporary solution for Safari 5.1.10 on a Mac using Snow Leopard If you haven't set up Safari to have the "Devlop" menu available then you'll have to do that first by doing this... 1: Select from the menu bar "Safari/ Preferences" and then select "Advanced" in the preferences window.

  8. If Safari won't open a page or work as expected on your Mac

    Reload the page. From the menu bar in Safari, choose View > Reload Page. Or press Command-R. If Safari won't reload the page, close Safari, then try again. If Safari won't close, you can press Option-Command-Esc to force Safari to close. If Safari reopens unwanted pages automatically, close Safari, then press and hold the Shift key while ...

  9. How to Remove the White Bars in the Safari Browser on iPhone X ...

    Activate the Custom Layouts module at Appearance > Astra Options > Astra Pro modules. Navigate to Appearance > Astra Options > Custom Layouts and add a new Custom Layout. On the next step, click "Enable Code Editor" to activate it. Insert the code in the Code Editor. Scroll down to the Settings and set the following options:

  10. Screen does not display properly. Long white line down ...

    This help content & information General Help Center experience. Search. Clear search

  11. white bar on google search results. any idea whats casuing ...

    I got a brand new M2 Max Apple Studio recently for work. Just installed Google Drive desktop app on it and part of the GUI language, including menus, appeared as gibberish as shown in the screenshot below. Anybody encountered the same problem? Many thanks! (M2 Max Mac Studio, 64gb Ram, Ventura 13.6)

  12. A White line Appear on the Screen of My New Macbook Air

    Sep 15, 2013. #1. Hi, I just bought my Macbook Air a week ago. This is my first apple laptop. I'm quite satisfied with its overall performance. But occasionally, when I open a new window, a white (or slightly colorful) thin line appears on the screen. It gets disappear when I switch to another window. Here is an example.

  13. If Safari isn't loading websites or quits on your iPhone, iPad, or iPod

    Connect to a different network. Try to load a website, like www.apple.com, using cellular data. If you don't have cellular data, connect to a different Wi-Fi network, then load the website. If you're using a VPN (Virtual Private Network), check your VPN settings. If you have a VPN turned on, some apps or websites might block content from loading.

  14. why is the Safari Search page a blank whi…

    Try double clicking the Home button and swipe Safari upwards. Go to Settings/Safari and clear History and Website Data. Open Safari and test. Safari - Clear the history and cookies on your iPhone, iPad, or iPod touch. Safari website data on your iPhone or iPad - How to clear

  15. Why there are white horizontal lines appearing on my screen?

    This help content & information General Help Center experience. Search. Clear search

  16. html

    1. Install the firebug (lite) extension her chrome browser and "inspect" the white line (select inspector, check the code causing the white line). This will bring you much nearer to the solution, as this shows you exactly WHERE in the markup the white line is created. Share.

  17. safari screen has grey screen over site a…

    1. Quit the app completely and restart the iPad. Go to the home screen first by tapping the home button. Double tap the home button and the task bar will appear with all of your recent/open apps displayed at the bottom. Tap and hold down on any app icon until it begins to wiggle.