safari background position not working

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

background-position

The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin .

The background-position property is specified as one or more <position> values, separated by commas.

A <position> . A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be center . If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s).

1-value syntax: The value may be:

• The keyword value center , which centers the image.
• One of the keyword values top , left , bottom , or right . This specifies an edge against which to place the item. The other dimension is then set to 50%, so the item is placed in the middle of the edge specified.
• A <length> or <percentage> . This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%.

2-value syntax: One value defines X and the other defines Y. Each value may be:

• One of the keyword values top , left , bottom , or right . If left or right is given, then this defines X and the other given value defines Y. If top or bottom is given, then this defines Y and the other value defines X.
• A <length> or <percentage> . If the other value is left or right , then this value defines Y, relative to the top edge. If the other value is top or bottom , then this value defines X, relative to the left edge. If both values are <length> or <percentage> values, then the first defines X and the second Y.
• Note that: If one value is top or bottom , then the other value may not be top or bottom . If one value is left or right , then the other value may not be left or right . This means, e.g., that top top and left right are not valid.
• Order: When pairing keywords, placement is not important as the browser can reorder it; the values top left and left top will yield the same result. When pairing <length> or <percentage> with a keyword, the placement is important: the value defining X should come first followed by Y, so for example the value right 20px is valid while 20px right is invalid. The values left 20% and 20% bottom are valid as X and Y values are clearly defined and the placement is correct.
• The default value is left top or 0% 0% .

3-value syntax: Two values are keyword values, and the third is the offset for the preceding value:

• The first value is one of the keyword values top , left , bottom , right , or center . If left or right are given here, then this defines X. If top or bottom are given, then this defines Y and the other keyword value defines X.
• The <length> or <percentage> value, if it is the second value, is the offset for the first value. If it is the third value, it is the offset for the second value.
• The single length or percentage value is an offset for the keyword value that precedes it. The combination of one keyword with two <length> or <percentage> values is not valid.

4-value syntax: The first and third values are keyword values defining X and Y. The second and fourth values are offsets for the preceding X and Y keyword values:

• The first and third values are equal to one of the keyword values top , left , bottom , or right . If left or right is given for the first value, then this defines X and the other value defines Y. If top or bottom is given for the first value, then this defines Y and the other keyword value defines X.
• The second and fourth values are <length> or <percentage> values. The second value is the offset for the first keyword. The fourth value is the offset for the second keyword.

Regarding Percentages

The percentage offset of the given background image's position is relative to the container. A value of 0% means that the left (or top) edge of the background image is aligned with the corresponding left (or top) edge of the container, or the 0% mark of the image will be on the 0% mark of the container. A value of 100% means that the right (or bottom ) edge of the background image is aligned with the right (or bottom ) edge of the container, or the 100% mark of the image will be on the 100% mark of the container. Thus a value of 50% horizontally or vertically centers the background image as the 50% of the image will be at the 50% mark of the container. Similarly, background-position: 25% 75% means the spot on the image that is 25% from the left and 75% from the top will be placed at the spot of the container that is 25% from the container's left and 75% from the container's top.

Essentially what happens is the background image dimension is subtracted from the corresponding container dimension, and then a percentage of the resulting value is used as the direct offset from the left (or top) edge.

Using the X axis for an example, let's say we have an image that is 300px wide and we are using it in a container that is 100px wide, with background-size set to auto:

So that with position percentages of -25%, 0%, 50%, 100%, 125%, we get these image-to-container edge offset values:

So with these resultant values for our example, the left edge of the image is offset from the left edge of the container by:

• + 50px (putting the left image edge in the center of the 100-pixel-wide container)
• 0px (left image edge coincident with the left container edge)
• -100px (left image edge 100px to the left of the container, in this example that means the middle 100px image area is centered in the container)
• -200px (left image edge 200px to the left of the container, in this example that means the right image edge is coincident with the right container edge)
• -250px (left image edge 250px to the left of the container, in this example that puts the right edge of the 300px-wide image in the center of the container)

It's worth mentioning that if your background-size is equal to the container size for a given axis, then a percentage position for that axis will have no effect because the "container-image difference" will be zero. You will need to offset using absolute values.

Formal definition

Formal syntax, positioning background images.

Each of these three examples uses the background property to create a yellow, rectangular element containing a star image. In each example, the star is in a different position. The third example illustrates how to specify positions for two different background images within one element.

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• background-position-x
• background-position-y
• Using multiple backgrounds
• transform-origin

[Fix] Background image CSS not working fixes

How to fix background images not appearing in CSS. A common issue is images not loading when we are messing around with relative paths. The post will go over various fixes for that!

🔔 Table of contents

Introduction.

One of the frustrating with setting background images in CSS is that the image does not turn up.

So many times something this simple should of been pretty straight forward even when the HTML and CSS seems like it is correct.

In this post, we will go over several ways (or a checklist) on how to fix this type of issue.

How do we use background image?

As the name suggests, the background-image property, sets a background image (or multiple images) for an element.

When you have multiple images, you will need to consider the stacking order. The first image defined will be the top image.

Fix 1 - check that the image path is correct

The most likely issue with your background image not working is that the image path that was provided is not correct. Below are a few tips you can go through to check for issues:

👉 Check your relative path

Commonly, the background image is not appearing is because the relative path provided did not resolve.

• / - This means the root directory
• ../ - This means going up on directory
• ./ - This means the current directory
• ../../ - This means going up two directories

Relative paths depend on the location of the CSS styling. As an example, lets say we include CSS in our HTML file (index.html) like so:

We also have a bunch of pictures in the following main folder:

• pictureA.png
• images/pictureY.png

To get pictureA.png , we can use the following command. Notice that since pictureA.png is in the same directory, we can just specify the filename or ./pictureA.png

To get pictureY.png , since it is located in the images folder, we can use the following command.

As another more complex example, lets say we have the following folder structure with the CSS file as an external file that is referenced by the HTML index.html file.

So our HTML looks something like this:

And the folder structure looks like the following:

• styles/main.css
• styles/sample-images/pictureX.png

Now, since our main.css is in the styles folder, if we want to load pictureA.png then we need to move up one directory level using ../ . The code is as follows:

Additionally, in this case, since pictureA.png is also in the root folder, the following code will work using / .

If we want to acess pictureX.png , then its a matter of going down one level to the sample-images folder.

If we need to load pictureY.png , then we will need to go up one directory and then down to the images folder like so:

👉 Using quotes

Earlier versions of CSS and browser implementations, there has been confusion on whether we need quotes or no quotes. According to the official CSS spec, quotes are optional ( https://www.w3.org/TR/CSS2/syndata.html#value-def-uri )

So the following code will be the same.

One exception is that if your image file name contains special characters. In this case, url needs to be URI-escaped (where “(” = %28, “)” = %29, etc.)

👉 Check your image file name and extension

One issue that can trip some people up is that the file names are case insensitive depending on the server that you are hosting the files. With most Unix based servers (Linux, or OSX), the files are case sensitive. While on Windows servers, they are not.

In the example below, lets say we have image called pinkish.png , the second line will not load the image due to the all caps PNG extension

Additionally for newer extensions such as WebP , browser support common across the latest versions. It will have no or partial support on older browsers. For example Safari 14.0 – 15.6 has full support of WebP, but requires macOS 11 Big Sur or later.

IE 11 or below will have no support for WebP . WebP images displays as a broken image icon in Microsoft Edge v18 in Application Guard mode even when an alternative image source format is available.

👉 Tip: Use absolute paths

While theres benefits of using relative paths for urls() with background-image , my preference would be to use absolute paths.

👉 Tip: Use Live Server in VS Code!

If you are coding with VS Code, then using the Live Server extension is a must. When you are just coding locally without a local server running, references to images can get a bit confusing.

For example, if you use the root directory / - this could mean your actual C:/ root folder instead of the current folder!

Fix 2 - check the height and width of the element

Lets say we have the following div element with class of .card and we want to set the background-image as below:

In the above case, the div does not have any content so you will not see anything. The div will have a width of 0 and height of 0 . To fix this, we need to explictily set the width and height:

Fix 3 - check the syntax is correct

The syntax for creating background images is pretty straight forward. You can apply multiple images to be layted on top of each other. As an example, the below, we have a catfront.png to be under a gradient image.

We can also set the background-image using the background shorthand property:

The background shorthand covers the following CSS properties:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

In some instances, when using the shorthand, it would seem like the background-image is not working correctly. This might be due to other properies and not the background image itself.

For example, take the following:

This will not work, however if we try to break it down to the explicit CSS properties, it will:

The reason why its not working with the shorthand background property is because we need to specify the position and size as well. So it had nothing to do with our background-image property.

Fix 4 - check other styles for overrides

There could be instances where our background image is not working correctly. Consider the following css:

Now if the catfront.png does not exist, this would mean our card element would not have a background image. The above is not immediately obvious that we are having conflicting background-image set on our card class since we are mixing shorthand vs explicity CSS.

Browser support and bugs

Background-image is generally supported across most browsers so there is not a concern or any weird browser specific hacks or prefixs we need to cater for.

However we should be careful on the type of image we are using. If we are using WebP , Safari 14.0 – 15.6 has full support of WebP, but requires macOS 11 Big Sur or later.

Additionally, there is no support for WebP on IE. As for Edge browsers, WebP images displays as a broken image icon in Microsoft Edge v18 in Application Guard mode even when an alternative image source format is available.

In this post we went over four possible fixes for when a background-image CSS property is not working. This can be due to using incorrect relative paths, the width and height not being specifified explicitly, incorrect use of the syntax, there are other styles that is overriding the background-image style.

Additionally the type of image format needs to be checked - WebP not supported on older browsers like Safari version 16-15.6, IE 11 or lower.

👋 About the Author

G'day! I am Huy a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

Follow along on Twitter , GitHub and YouTube

👉 See Also 👈

• CSS important Not Working - and Fixes
• [Fixed] CSS :after element is not working
• [5 FIXES] for CSS z-index not working - Updated for 2023
• CSS pulse animation on hover
• Creating gradient animation with CSS
• CSS case insensitive attribute selector

DEV Community

Posted on Jan 8, 2020 • Updated on Jun 21, 2023 • Originally published at blog.tobias-roeder.de

iPhone Safari – fixed background image

In this blog post i will explain how to make your background image fixed in the safari browser on an iphone.

In this Codepen example you'll find a solution how to make the background image fixed in the Safari browser on an iPhone only with CSS.

Shortly explained: for the background image we'll be using an <img> , fixing it with the help of postition: fixed and to ensure to be behind the default level we'll set z-index: -1 . With the help of top: 0 , right: 0 , bottom: 0 and left: 0 we say the image thanks to the postition: fixed that it has to be full screen. For more legacy support I will not use the new inset: 0 . To make sure that the image will be the full background, we need so set the with and the height to 100% .For that it is required to use display: block because the <img> is not a block element by nature. Last but not least we set the object-fit: cover to get the typical unstretched full size background image.

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Change Colours in a Bitmap Image using Browser CSS Filters

Anthony Fung - Mar 20

Alex - Mar 31

Submission for Frontend Challenge Earth-Day-Edition: Earth's Rotation: Rotating with CSS on Earth Day

Dhanush - Apr 21

MistCSS : Create React components using CSS Only!! 🚀

Sajid Sheikh - Mar 31

We're a place where coders share, stay up-to-date and grow their careers.

The Fixed Background Attachment Hack

What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries.

Or get around it with a small fix. I suppose we could call it a “hack” since it’s a workaround in code that arguably we shouldn’t have to do at all.

Before I show you the fix, let’s examine the issue. We can see it by looking at two different approaches to CSS backgrounds:

• a background using a linear gradient
• a background using an image

Linear gradient

I want to keep the background gradient in a fixed position on scroll, so let’s apply basic CSS styling to the body that does exactly that:

Here are the results in Chrome and Firefox, both on Android, respectively:

The gradient simply scrolls along with other content then jumps back. I don’t know exactly why that is — maybe when the URL tab goes up or disappears on scroll and the browser finds it difficult to re-render the gradient in real time? That’s my best guess since it only seems to happen in mobile browsers.

If you’re wondering about iOS Safari, I haven’t tested on iOS personally, but the issue is there too. Some have already reported the issue and it appears to behave similarly.

Background image

This issue with images is no different.

Another interesting thing to note is that when background-attachment: fixed is applied, the height is ignored even if we explicitly specify it. That’s because background-attachment calculates a fixed background position relative to the viewport.

Even if we say the body is 100vh, background-attachment: fixed is not exactly in accordance with it. Weird! Perhaps the reason is that background-attachment: fixed relies on the smallest possible viewport while elements rely on the largest possible viewport. David Bokan explains ,

Lengths defined in viewport units (i.e.  vh ) will not resize in response to the URL bar being shown or hidden. Instead,  vh  units will be sized to the viewport height as if the URL bar is always hidden. That is,  vh  units will be sized to the “largest possible viewport”. This means  100vh  will be larger than the visible height when the URL bar is shown.

The issues are nicely documented over at caniuse :

Firefox does not appear to support the local value when applied on a textarea element. Chrome has an issue that occurs when using the will-change property on a selector which also has background-attachment: fixed defined. It causes the image to get cut off and gain whitespace around it. iOS has an issue preventing background-attachment: fixed from being used with background-size: cover .

Let’s fix it

Call it a temporary hack, if you will. Some of you may have already tried it. Whatever the case, it fixes the linear gradient and background image issues we just saw.

So, as you know, we are getting in trouble with the background-attachment: fixed property and, as you might have guessed, we are removing it from our code. If it’s looking at the smallest possible viewport, then maybe we should be working with an element that looks for the largest possible viewport and position that instead.

So, we are creating two separate elements — one for the background-gradient and another for the rest of the content. We are replacing background-attachment: fixed with position: fixed .

Now, wrap up the rest of the content — except for the element containing the background image — inside a main container.

We can use the same trick hack with background images and it works fine. However, you do get some sort of background scrolling when the URL bar hides itself, but the white patch is no longer there.

Here are my takeaways

A fixed-position element with a height set to 100% behaves just like the element with background-attachment: fixed property, which is clearly evident in the example below! Just observe the right-most bar (purple color) in the video.

Even though, David Bokan in his article states that:

That is, a position: fixed element whose containing block is the ICB will resize in response to the URL bar showing or hiding. For example, if its height is 100% it will always fill exactly the visible height, whether or not the URL bar is shown. Similarly for vh lengths, they will also resize to match the visible height taking the URL bar position into account.

If we take into account that last sentence, that doesn’t seem to be the case here. Elements that have fixed positioning and 100vh height don’t change their height whether the URL bar is shown or not. In fact, the height is according to the height of the “largest possible viewport”. This is evident in the example below. Just observe the light blue colored bar in the video.

So, it appears that, when working with a container that is 100vh, background-attachment: fixed considers the smallest possible viewport height while elements in general consider the largest possible viewport height.

For example, background-attachment: fixed simply stops working when a repaint is needed, like when a mobile browser’s address bar goes away on scroll. The browser adjusts the background according to the largest possible viewport (which is now, in fact, the smallest possible viewport as URL bar is hidden) and the browser isn’t efficient enough to repaint on the fly, which results in a major lag.

Our hack addresses this by making the background an element instead of, well, an actual background. We give the element containing the content an absolute position to stack it on top of the element containing the image, then apply a fixed position on the latter. Hey, it works!

Note that the viewport height is calculated excluding the navigation bar at the bottom (if present). Here’s a comparison between the presence and absence of navigation bar at the bottom in Chrome Android.

Is there a downside? Perhaps! We’re using a general <div> instead of an actual <img> tag, so I wouldn’t say the markup is semantic. And that can lead to accessibility issues . If you’re working with an image that adds meaning or context to the content, then an <img> is the correct way to go, utilizing a proper alt description for screen readers.

But if we go the proper <img> route, then we’re right back where we started. Also, if you have a navigation bar at the bottom which too auto hides itself, then I can’t help it. If the hack won’t cut it, then perhaps JavaScript can come to the rescue .

Nice workaround.

Have you tried applying background-attachment: fixed to the html element itself?

This should arguably not be affected by other styles you used; the exception being ‘position: fixed’ – never use that on the root element . In this way you’re left free to use the other background related styles on body, even in shorthand.

Note that I have not tested this.

Happy hacking!

Man, you just saved my day! I hope you have a cold beer in the next 24hrs. Cheers!

I meant to write ‘other styles’ and not ‘other background-related styles’ in my previous reply. Naturally, all ‘background-related’ styles should be on the same element. I need coffee. Cheers.

A method I’ve used that seems to behave on desktop and mobile, is to apply a background-image to a pseudo-element, sized to match the content, like so:

This also works with ::after .

The only drawback I’ve found is it takes up one pseudo-element.

If that is a problem, because you need that particular pseudo-element for another purpose, then just use a nested element with similar CSS as for using a pseudo-element.

If there are other methods out there that also do the trick, I’d love to know about them.

Thanks for the idea, I attempted to put it into practice but using position fixed seems to want to use the root as a container even when the direct parent has position relative

I always do this with ::before instead of an actual element.

Please try this with 2 or 3 pictures in a row. So text 1 is larger than image 1 and should scroll in it. Then image 2 should come and scroll a text in it again. A one-pager with pictures, so to speak

I haven’t been able to get it to work for more than 1 image, with CSS only. I’m still working on a solution that has multiple images, that depends upon JS, but I’m afraid, even before starting, that it will not be very performant. IF anyone has any suggestions?

Hi thank for this informations. I’m a novice. please, can you explain where to place the code in wordpress theme editor? thank in advance for your help : )

This is a great approach, and has the additional advantage of allowing us to set an offset at the top and/or bottom to compensate for a fixed header and/or footer, meaning that the top or bottom parts of the background image would still be visible, not hidden by header or footer.

Usually i don’t comment, but i was looking for a solution to the mobile-url-bar-resize-problem for years and i must have read way over 100 articles on that topic, none of them solving the problem.

So please, accept my humble “Thank you”.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cover Block: Fixed background problem in iPadOS 13.x Safari #17718

depthoffocus commented Oct 2, 2019 • edited

• 👍 3 reactions

depthoffocus commented Oct 2, 2019

• 👍 5 reactions
• 😕 1 reaction

Sorry, something went wrong.

zdenys commented Apr 24, 2020

Depthoffocus commented apr 24, 2020.

• 👍 1 reaction

jeroenrotty commented Sep 7, 2020

charlesjayway commented Sep 30, 2020

Jeroenrotty commented sep 30, 2020.

jasmussen commented Jun 30, 2021

Robertght commented Oct 28, 2021

Jasmussen commented nov 1, 2021.

paaljoachim commented Dec 14, 2021 • edited

tomasztunik commented Apr 6, 2022 • edited

Paaljoachim commented apr 7, 2022 • edited.

Successfully merging a pull request may close this issue.

• PRO Courses Guides New Tech Help Pro Expert Videos About wikiHow Pro Upgrade Sign In
• EDIT Edit this Article
• EXPLORE Tech Help Pro About Us Random Article Quizzes Request a New Article Community Dashboard This Or That Game Popular Categories Arts and Entertainment Artwork Books Movies Computers and Electronics Computers Phone Skills Technology Hacks Health Men's Health Mental Health Women's Health Relationships Dating Love Relationship Issues Hobbies and Crafts Crafts Drawing Games Education & Communication Communication Skills Personal Development Studying Personal Care and Style Fashion Hair Care Personal Hygiene Youth Personal Care School Stuff Dating All Categories Arts and Entertainment Finance and Business Home and Garden Relationship Quizzes Cars & Other Vehicles Food and Entertaining Personal Care and Style Sports and Fitness Computers and Electronics Health Pets and Animals Travel Education & Communication Hobbies and Crafts Philosophy and Religion Work World Family Life Holidays and Traditions Relationships Youth
• Browse Articles
• Learn Something New
• Quizzes Hot
• This Or That Game
• Train Your Brain
• Explore More
• Support wikiHow
• About wikiHow
• Log in / Sign up
• Computers and Electronics
• Smartphones

2 Easy Ways to Customize the Safari Homepage Background

Last Updated: April 19, 2023 Fact Checked

Using iPhone or iPad

This article was written by Luigi Oppido and by wikiHow staff writer, Rain Kengly . Luigi Oppido is the Owner and Operator of Pleasure Point Computers in Santa Cruz, California. Luigi has over 25 years of experience in general computer repair, data recovery, virus removal, and upgrades. He is also the host of the Computer Man Show! broadcasted on KSQD covering central California for over two years. This article has been fact-checked, ensuring the accuracy of any cited facts and confirming the authority of its sources. This article has been viewed 35,200 times.

Do you want to customize your Safari start page? Whether you're using the Safari app on iOS or the desktop version on Mac, you'll be able to change Safari's background image in a few simple steps. You can use Apple's default backgrounds or one of your own saved photos. If you're trying to change your Safari theme from white to black (or vice versa), you'll need to configure your Light/Dark display in the Settings app. This wikiHow will show you how to change the background image on Safari using your iPhone, iPad, or Mac.

Things You Should Know

• On iOS, open a new start page. Tap "Edit," toggle on "Background Image," and then select a photo.
• On Mac, open Safari, click "Settings," and check the "Background Image" box. Select a photo and then click "Choose."

• Changing the Safari background is different from enabling Dark Mode .
• To enable or disable Dark Mode, go to Settings → Display & Brightness → select Light or Dark .

• If you have a lot of Favorites on your start page, you may need to scroll down to see this button.

• When it's toggled on, a collection of background images will appear. If you want to use one of Apple's provided backgrounds in Safari, tap it to apply it immediately.
• To use your own image as the background, continue to the next step.

• The Photos app will open.

• If you have a photo on your computer you'd like to use, you can transfer it to your iPhone or iPad using AirDrop.
• Tap X to close the page.
• If you want to remove the background image, return to the "Edit" menu and toggle off "Background Image".

• Be sure to update your Mac .

• A pop-up menu will open.

• When the box is checked, two tiles will appear. You can scroll towards the right to see more. If you want to use one of Apple's provided background images, click it to change your background immediately.
• To use your own image, continue to the next step.

• The Finder will open to your photos. Navigate through your folders to find a picture.

• If you want to remove the background image, return to the "Settings" menu and uncheck "Background Image".

Expert Q&A

You might also like.

• ↑ https://support.apple.com/guide/safari/customize-a-start-page-ibrw01514823/mac

About This Article

• Send fan mail to authors

Is this article up to date?

Featured Articles

Trending Articles

Watch Articles

• Terms of Use
• Privacy Policy
• Do Not Sell or Share My Info
• Not Selling Info

wikiHow Tech Help Pro:

Level up your tech skills and stay ahead of the curve

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

Why doesn't "position: sticky" work in Safari?

There's a CSS property called position: sticky that makes things stick to the top of the browser window (like a navbar) while scrolling. Using the Developer tools, it shows that "position: sticky" is invalid in Safari. This works fine in Chrome and Firefox, but for some reason not in Safari.

I have Safari 12.1.1 running on macOS Mojave 10.14.5.

I've also tried position: webkit-sticky but Safari also thinks that is an invalid CSS property.

iMac 27", macOS 10.14

Posted on Jun 21, 2019 11:43 AM

Similar questions

• scroll doesn't work in safari on some pages On some webpages, I cannot scroll down. The only thing I can see is as much of the page as fits in the window. If I make the window smaller, or zoom out via CMD -, the part of the page that can be seen in the window changes but I still can't scroll past what's in the window. Basically the page doesn't scroll. Here is the latest webpage I've had the problem with: https://www.ebay.de/sch/i.html?_from=R40&_trksid=p2380057.m570.l1313.TR12.TRC2.A0.H0.Xfalten+schreibmaschine.TRS0&_nkw=falten+schreibmaschine&_sacat=0 I searched on here for someone having the same issue and I only found one from 14 years ago. No one responded so no luck there. I am running Mojave on a Macbook Air 2012. Thank you. Noah 786 2
• Safari scrolling is not smooth When browsing websites (any website) on Safari, the scrolling with trackpad / mouse / scrollbar is not smooth. There is a noticeable stutter. This does not happen when using Chrome, where the scrolling is buttery smooth. Is this normal behaviour, or is there something that can be done to fix this? I am running Safari 14.0.2, on Big Sur 11.1 (latest update), on a MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) with Intel Core i7 Quad-Core. This problem has been persistent through multiple versions of Safari and OS. 789 2
• Safari Zoom in/ zoom out (A) on toolbar not working The text zoom/unzoom function on the toolbar has quit working. If I click on either zoom or unzoom the same thing occurs. It zooms or unzooms for about a second or so then returns to the original state. I have used this function forever and am not sure when it quit working. This happens in Safari and also Safari Technology Preview. This does not happen with Firefox. Thanks for any reply. 212 5

Loading page content

Page content loaded

Jun 21, 2019 12:19 PM in response to VikingOSX

Unfortunately it doesn't clear anything up. I'm using it correctly, but Safari says "sticky" and "webkit-sticky" are unsupported properties .

It's very strange that Safari doesn't support it. The "Can I Use" website states that Safari does support this property with the "webkit" prefix, but as shown above, Safari says both "sticky" and "webkit-sticky" are unsupported.

Jun 28, 2019 3:32 PM in response to VikingOSX

Yes, that was a typo. I added position: -webkit-sticky, and while it doesn't show as being an unsupported property now, it just doesn't work in Safari or Chrome.

Jun 29, 2019 5:38 AM in response to TomNYC

The DEMO on this website shows position: -webkit-sticky; working correctly. I have tested the DEMO in Firefox 67.0.4 and Safari 12.1.1 on macOS Mojave 10.14.5, and it works identically in both browsers. I do not use Chrome.

Jun 21, 2019 3:03 PM in response to TomNYC

Syntactically, I believe you have dropped a leading dash in webkit property spelling:

Jun 21, 2019 12:02 PM in response to TomNYC

Position: Sticky dissected . Does that article clear up and allow you to effectively apply this CSS3 property?

• Web Development

How to Fix Issues With CSS Position Sticky Not Working?

• Daniyal Hamid
• 05 Feb, 2024

The CSS position: sticky may not work for a number of reasons. You can consider the following checklist to address potential issues:

• Check for Browser Compatibility ;
• Check if a Threshold Has Been Specified ;
• Check if Parent or Ancestor Element Has overflow Property Set ;
• Check if Sticky Has Enough Room to Scroll Within ;
• Check if the Sticky Element Stretches Inside a Flexbox ;
• Check for Overriding Rules .

Checking for Browser Compatibility

Check that the browser you're using supports position: sticky .

Known Issues

Missing vendor prefix for safari 13 and below.

In Safari 13 and below, a vendor prefix ( -webkit-sticky ) is required in addition to position: sticky :

Sticky Table Headers Issue

Firefox 58 & below, Chrome 63 & below and Safari 7 & below do not appear to support sticky table headers:

Check if a Threshold Has Been Specified

A sticky element requires a threshold to be specified for properties like top , right , bottom , and left . The threshold value that you set, will make the sticky element act as fixed positioned when it crosses the specified threshold, and a relatively positioned element otherwise. You can see in action in the following example:

Failure to set a threshold can make the sticky element behave similarly to relative positioning:

Therefore, you must set a value other than " auto " for at least one of, top , right , bottom , or left properties for position: sticky to work. For example:

Check if Parent or Ancestor Element Has overflow Property Set

If a parent or ancestor of the sticky element has overflow: hidden , overflow: scroll , or overflow: auto , the sticky might not work. You can see this issue in the following example:

To diagnose and fix this issue, you can do the following:

Find Parent or Ancestors With overflow Property Set

You can copy/paste the following snippet in your browser's web developer console to identify all parent/ancestor elements with overflow property set to something other than visible :

Add a height for the Overflowing Container

By specifying a height on the overflowing container(s) you identified in the previous step, you should be able to make position: sticky work without having to remove the overflow property from the container element.

Consider, for example, the following where setting the height on the overflowing element (e.g., " #parent ") fixes the issue:

For detailed explanation and examples, check out the post about fixing CSS position: sticky not working with overflow .

Checking if Sticky Has Enough Room to Scroll Within

If the sticky element does not have enough room to scroll within, it won't work. This could be the case when:

Sticky Element Has Same or Larger Height Than the Parent

This will make all children of " #parent " (including the sticky element) the same height , producing an output like the following:

Sticky Element Is Stretched to Same Height as Parent

This will make the sticky and the parent element the same height , producing an output like the following:

In these cases the sticky element ends up having no room for scrolling within its container. Therefore, to make the sticky work in these instances, you can make the height of the sticky smaller, or make the height of the parent larger. For example:

This will make the height of the sticky element smaller than its siblings, giving it room inside its container to stick within:

As a rule of thumb, the parent element should always have a larger height than the sticky element for it to work.

Checking if the Sticky Element Stretches Inside a Flexbox

If sticky element's parent is a flexbox, then you must make sure that it does not stretch to occupy the entire height of its container. Otherwise, it will leave no room for it to move within. This can be the case in the following scenarios:

Parent Has align-items: normal and Sticky Has align-self: auto

The flex parent and sticky element default to align-items: normal and align-self: auto respectively. So, when you implicitly or explicitly specify these values, position: sticky won't work:

Parent Has align-items: stretch and Sticky Has align-self: auto

When the flex parent explicitly has align-items: stretch and the sticky element implicitly or explicitly has align-self: auto set, position: sticky won't work:

When Sticky Has align-self: stretch

When the sticky element is has align-self: stretch set, it takes precedence over parent's align-items value, resulting in the sticky element being stretched to fill the container. This leaves no room for sticky to scroll within:

To fix all these issues, you can simply set the value of the align-self property of the sticky element to a value that does not make it stretch. For example, you could set align-self to flex-start , making the sticky element position at the start and not be stretched:

For detailed explanation and examples, check out the post about fixing CSS position: sticky not working in a flexbox .

Checking for Overriding Rules

You can make sure that the element you are applying the position: sticky property to is not being overridden by a more specific selector.

For example, consider the following HTML/CSS:

It could be the case, for example, that another CSS selector with higher specificity is overriding your selector and the CSS style rules on the element, such as the following:

To fix this, you can either remove the more specific selector , or make your selector more specific than the other one.

This post was published 26 Apr, 2020 (and was last revised 05 Feb, 2024 ) by Daniyal Hamid . Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post .

Sign up for our daily newsletter

• Privacy Policy
• Advertise with Us

Safari Not Working on Your iPhone? Here’s How to Fix It

Although iPhones and iPads support other apps to reach the Web, Safari remains the most favored and frequently used browser for iOS users. Troubleshooting on Safari can be frustrating, especially if its issues prevent you from searching for a solution online. Here are a few common reasons why Safari may not be working on your iPhone and how to fix the problems.

Turn on Mobile Data for the Safari App

Disable experimental features, change your network settings.

Also read: How to Make Mobile Safari Save Your Passwords on iOS

Test Your Internet Connection

To begin with, ensure that the problem is with Safari and not with your internet connection. For this, open, say, a non-Apple app like Facebook or Chrome, and see whether the website or the feed loads. If it does, then Safari is at fault. Otherwise, your internet connection is at fault. If it’s the former, move on to the next step.

If you’ve been exploring your iPhone’s data-saving features, which let you specify which apps have access to your phone’s mobile data, then there’s a chance that you turned off mobile data for the Safari app. That means Safari will work when you’re connected to Wi-Fi but not to mobile data. (Try running Safari over Wi-Fi to test this.)

If that’s the case, then to turn mobile data back on for Safari, go to “Settings -> Mobile Data,” and then in the “Mobile Data” list, make sure the slider next to Safari is in the green “On” position.

Also read: 20 of the Best Siri Shortcuts for iOS Power Users

You may not know about this, but Safari for the iPhone has a whole load of experimental features that you can disable and enable as you please.

The problem with these, as the name suggests, is that they are indeed experimental and subsequently don’t all work properly. Disabling them one by one can fix Safari if it’s not working and help you discover which exact feature was causing the problem,

On your iPhone, go to “Settings -> Safari -> Advanced -> Experimental Features.”

If you have more than one feature enabled here, disable just one, then check to see if Safari works normally again. If it doesn’t, re-enable that feature (if you want it) and disable the next one. Keep repeating this procedure until Safari starts working again.

Also read: Everything You Need to Know About Using “Shared with You” in iOS 15

Try resetting your Wi-Fi connection and reconnecting to the network.

• Go to “Settings -> Wi-Fi” and turn it off, then turn it back on after a few seconds.

• If you’re using mobile data, go to “Settings -> Mobile Data” and turn “Mobile Data” off and back on after a few seconds.

• If neither option works, go to “Settings -> Wi-Fi,” connect to a different Wi-Fi network, and try loading the web page again.

If the problem persists, try restoring your network settings to their original configuration.

• Go to “Settings -> General -> Transfer or Reset iPhone -> Reset” and choose “Reset Network Settings.”

Also read: How to Fix Contact Names Not Showing, Appearing as Numbers in iOS

Common Problems With Safari And How To Solve Them

By following the fixes we’ve mentioned above, you should be able to revive Safari and make it work normally again. However, there are some specific issues that commonly come up with Safari. Here’s how to solve them.

Problem: Safari Crashed and Won’t Open

If you’ve ever panicked after Safari closed unexpectedly and couldn’t get the app to start, you probably encountered a bug that affects Safari’s search engine suggestions. This issue can cause the app to crash, freeze, or fail to start altogether. Although the bug usually plagues devices running iOS 10, it can affect just about any iPhone or iPad.

How to Fix It: Disable Search Engine Suggestions

Go to “Settings” and choose “Safari” in your list of apps. Here, find “Search Engine Suggestions” and turn it off.

This feature offers suggestions for what you can search for as you type into Safari’s search bar. Disabling it gets rid of the problem for many users.

Problem: Safari Is Gray (and Won’t Open)

Sometimes when you update your iPhone’s iOS to a newer version, you may encounter a bug that turns some apps gray and prevent them from opening.This bug causes Safari to stop working and turns its icon gray when you switch to another app while Safari is running in the background.

How to Fix It: Update Your Software

To solve this problem, update your iPhone to the latest version of iOS. Apple includes important bug fixes in each software update, so it’s important to keep your iPhone or iPad up to date. iOS 11.1 fixed this bug for most users, so be sure to update to 11.1 or greater if you’re running an older version of iOS.

Go to “Settings -> General,” choose “Software Update,” and install the latest update.

Also read: How to Update to iOS 17 Smoothly

Problem: Safari Is Slow

As powerful as your iPhone can be, it can get bogged down with all the extraneous information that it processes. If you notice that Safari takes longer to load pages or graphics, it may be time to do some housekeeping. Try clearing your browser history, website data, and cache to make Safari run more smoothly.

How to Fix It: Clear Your Data

To delete your cookies, cache, and browsing history, go to “Settings -> Safari,” choose “Clear History and Data,” and confirm that you want to go ahead. Safari will remember your AutoFill information if you choose this option.

To keep your browsing history but clear your cache and cookies, first go to “Settings -> Safari -> Advanced.”

There, choose “Website Data -> Remove All Website Data” and tap “Remove Now.” Note that Safari will not remember your AutoFill information if you choose this option.

To remove only a portion of your browsing history, cache, and cookies, start by opening Safari and tapping the Bookmark icon. Here, open your history and tap “Clear.” Now Safari will give you the option to clear your history, cookies, and browsing data from the past hour, the past day, the past 48 hours, or from your entire history. Pick the relevant option.

Problem: Safari Still Isn’t Working

Although it sounds cliche, turning your phone off and back on again can be the solution to any number of Safari-related issues.

How to Fix It: Restart Safari or Reboot Your Phone

If none of the previous fixes help solve your problem, try restarting the app or rebooting your phone.

• Swipe up from the bottom of the screen and press on the screen when your finger is near the center to open the multitasking view, and then swipe up on Safari to close it. This will reset Safari.
• To shut down your phone, press and hold the sleep/wake button until a slider appears. Slide to the right to power off your phone. For iPhone X and above, press and hold the side button and one of the volume buttons until the slider appears. Then slide it to the right to power off your phone.

Also read: How to Block Websites on Chrome, Firefox, Edge, Safari, Android, and iOS

Frequently Asked Questions

How to fix "safari can't find server" on iphone.

The most probable and common reason behind the “Safari can’t find server” error is not with Safari but with your internet connection. Here are a few ways to fix it.

• Reset your wireless router.
• Turn mobile data off and turn it back on again.
• Clear Safari cache and data.
• Restart your iPhone.

How to reset Safari on iPhone?

To reset Safari on your iPhone, open the Settings app and scroll to the Safari settings. There, tap on “Clear History and Website Data” and the bottom of the page and follow up along with the pop-up on your screen to confirm the action. Once it’s complete, all your data and cookies will be wiped clean, and Safari will be as good as new.

Can you reinstall Safari on your iPhone?

Yes, just like any other app, you can uninstall Safari from your iPhone by holding down the Safari icon on the home screen and tapping “Remove app.” Then, visit the App Store, search for Safari, and reinstall it from there. Can’t find the Safari app to delete it? Here’s how to delete hidden apps .

Image credit: Flickr

Our latest tutorials delivered straight to your inbox

Ojash has been writing about tech back since Symbian-based Nokia was the closest thing to a smartphone. He spends most of his time writing, researching, or ranting about Bitcoin. Ojash also contributes to other popular sites like MakeUseOf, SlashGear, and MacBookJournal.

How to make position sticky work in Safari

TLDR; This is how to make position sticky work in Safari:

Make the sticky element a block and make a parent relative.

Here’s how to make position sticky work on Safari and Safari mobile

Follow this simple checklist:

• Add position : sticky to the element that’s going to be sticky.
• Add top: 100px to the sticky element. This is the offset top of whatever you need it to be.
• Add display: block to the sticky element. flex and grid should work, too. *This is where Safari trips up, as inline or inline-* will not work.*
• Add position: relative to the parent (or ancestor) element that’s the sticky element is to stay within.
• Enjoy sticky elements.

That’s it, but if you need more help, please get in touch.

Get in touch

Reply Cancel reply

How can we help.