The background-size CSS property may experience malfunctioning on iOS devices when using Safari browser

My website has a body background size set, which works well on Android and Windows devices. The background size is intended to be 85% width and 5% height of the body. However, when loading the site on an iPhone, the height appears much larger than 5%. It seems to be around 50% of the viewport which is unexpected. I have tried using the -webkit prefix but it doesn't seem to resolve the issue. Could there be something specific to iOS and Safari causing this discrepancy? If anyone has insight into what might be happening or how to fix it, I would greatly appreciate your help. Thank you in advance.

CSS

body 
{
    background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white) fixed;
    background-repeat: no-repeat;
    background-position: top center; 
    background-size: 85% 5%; 
}

I am curious about how different browsers calculate the body background height. It seems like other browsers are using the viewport height, but on iPhone the parameters do not align properly. Any insights on this behavior would be useful in resolving the issue.

htmlcssios

Answer №1

The use of fixed as a CSS property is essentially a shorthand for background-attachment: fixed;.

However, it's worth noting that this property may not be fully supported by all browsers. To check current support levels, you can visit Can I Use.

If you want to create a fixed-position element with a height set to 100%, you can achieve the same effect using the background: .... fixed; property.

Instead of applying this property directly to the body tag, consider creating a separate div element like the one shown below:

<head>
<style>
  .background {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(left, white, white, #98AEC4, white, #98AEC4, white, white);
    background-repeat: no-repeat;
    background-position: top center; 
    background-size: 85% 5%; 
  }
  .long-div {
    height: 100vh;
  }
</style>
</head>
<body>
  <div class="background"></div>
  <div class="long-div">Scroll down to see how it behaves on scroll 👇🏻</div>
  <div class="long-div">Here you are at the halfway point of the scroll 👇🏻</div>
  <div>You've reached the bottom of the scroll.</div>
</body>

If you're interested in learning more about this technique, you can read a detailed article on CSS-TRICKS titled The Fixed Background Attachment Hack.

Answer №2

When using Safari on iPhones, it is recommended to include background-attachment in the media query like so:

@media (max-width : @iphone-screen){
background-attachment: scroll;

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

My applications are not firing the deviceready event as expected

Struggling to incorporate a cordova plugin into my vue.js project using vue-cordova. Specifically, I am attempting to utilize the open-native-settings plugin to access device settings on iOS or Android. While it works seamlessly in the demo app provided b ...

javascriptandroidioscordovavue.js

Please assist in changing the text color of the right side of my navigation bar to white with the help of Bootstrap

Is there a way to change the text color of my nav-bar to white, while keeping the background as 'primary-subtle' with Bootstrap? How can I override Bootstrap's default functions using CSS when combining these two styles? Here is the code sn ...

htmlcsstwitter-bootstrapbootstrap-modalbootstrap-5

Refreshing the parent page in Oracle Apex upon closing the child window.When the child window

I have created an interactive report with a form where the interactive report is on page 2 as the parent page and the form page is on page 3 as the child page. In the parent page, I have written JavaScript to open a modal window (form page - page 3) using ...

javascriptjqueryhtmloracleoracle-apex

From Table to DIV: A Simple Conversion

I have encountered a major issue that has stumped me so far. Perhaps you can assist me. I am dealing with a table that appears as follows: __________________________________ | | time1 | time2 | time3 | +--------+-------+-------+-------+ | John | ...

javascriptphpjquerycss

Activate the Bootstrap 5 responsive font sizing feature (RFS) for the base font elements

I'm attempting to utilize Bootstrap's RFS functionality in version 5.1.3 to apply font sizing globally. Within my SCSS file, I've defined some basic font sizes, imported the Bootstrap SCSS files, and configured the font size settings. Howev ...

csstwitter-bootstrapsassresponsivebootstrap-5

Having trouble getting your React project to work because NPM start won't cooperate? Here are some troubleshooting tips

Hello, I recently downloaded a React project from https://github.com/fabiau/jc-calendar. However, when I try to run npm start, I encounter error messages. I have attempted to use "NPM Fund" and "NPM Update", but unfortunately, neither of them resolved the ...

htmlcssreactjsnpm

Here's a guide on how to display texts underneath icons in Buttons using Material UI

Currently, this is the Button I have displayed https://i.sstatic.net/YkHp0.png I am trying to figure out how to position the Dummy Button text beneath the icon. Can someone assist me with this? Below is my code snippet: <Button className={classes.d ...

javascripthtmlreactjsmaterial-ui

Crafting interactive image checkboxes

At present, the checkboxes in my application are quite basic with labels. However, our app designer has requested that we revamp this feature and make it more appealing by using clickable images that still function like checkboxes. Allow me to provide an ...

javascriptjqueryhtmlcss

Using PHP to nest a table within HTML and populate it with numbers ranging from 1 to 100

I am struggling with a practice question that involves creating a table using PHP nested in HTML. I need some help fixing it and understanding where I went wrong. The task is simple: generate numbers from 1 to 100 in a table, with each row containing 10 n ...

phphtmlmysql

Issue with slow scrolling in UITableView due to URL Image in Swift 3

I've developed an extension that prints image URLs on UIImageView. However, I suspect that this is causing my tableView to slow down. I believe creating a separate thread for this process may help speed up the performance. Could you advise me on how t ...

iosswiftuitableviewdispatch-asyncimageurl

Close any other panel when one is selected in a loop

I am experiencing difficulty with a series of menus that are causing other panels to hide when one is clicked and active. @{int i = 0;} @foreach (var levelOne in Model.MenuLevelOne) { <div class="panel-group" id="accordio ...

javascripthtmlpanel

I'm having trouble getting my modal to open, it just displays the information on my page instead

I am encountering some difficulties with my model window. I would like it to open a modal that shows a larger version of the photo and description when the thumbnail is clicked. However, I have not been able to get it to work properly. The only time it pop ...

htmlcsspopupmodal-dialog

Creating a carousel similar to the one on Skipperlimited's website can be achieved

I am working on a project and I would like to create a design similar to the one found at Specifically, I am interested in replicating the carousel of images and the rotating carousel within their logo. Can anyone provide guidance or suggestions on how to ...

jqueryhtmlcssbootstrap-4

The click event in jQuery is being blocked by the use of "display:none

Currently, I have implemented a search box feature with search suggestions: <input id="searchBar" /> <div id="searchSuggestion"></div> The searchSuggestion div is dynamically updated using jQuery ajax whenever an input is entered (imple ...

javascriptjqueryhtml

Creating a clickable image overlay card in Bootstrap 4 - A simple tutorial

I'm trying to use the Bootstrap 4 card element to create a grid of images with overlaid headings, but I'm having trouble linking the image itself. I attempted the stretched link method without success. I also tried placing the entire card in an ...

htmlcssbootstrap-4

Customizing Bootstrap tooltip appearances with CSS

After successfully setting up Bootstrap 4.5.0, I decided to experiment with customizing the styles of tooltips. The code snippet below shows how I attempted this. Initially, I included the necessary stylesheets at the top of the page: <link rel=&q ...

htmlcsstwitter-bootstrapbootstrap-4tooltip

The grid-column-end attribute is creating a gap in the layout

For the task at hand, my goal is to showcase the final 3 elements of a container in a horizontal alignment. In this setup, the first two items are allotted fixed space while the third element expands to fill the remaining columns. To accomplish this layou ...

htmlcsscss-grid

Iframe not functioning properly on Internet Explorer versions 8-11 when using WordPress

I'm having trouble getting my WordPress video to display when using an iframe. When I try to view it in Internet Explorer, the video automatically loads in Windows Media Player instead of playing through the iframe. The video files are local mp4s and ...

htmlcsswordpressiframe

Fill the image with width using Mat

While working on creating cards using Angular Materials, I encountered an issue where the image was not filling up the space as desired. The red area in the image indicates where I want the image to take up space. https://i.sstatic.net/vcc9U.png HTML: & ...

htmlcssangularangular-material

Refreshing a specific area on a webpage through the use of Ajax technology

I need to update a specific part of my webpage when a user clicks on the 'clear' button. I currently have some code that I borrowed from another answer I found on this site: $('.clear').click(function () { $.ajax({ url: "", ...

jqueryhtmlajaxrefresh