On iOS devices, background images may not appear in the Home Screen after being added

My CSS code looks like this:

#thumbnail {
    background-image: url(bla.jpg),
    background-size: cover,
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

While it displays fine on iOS Safari and other platforms, the image does not show up when I "Add to Home Screen" the page.

Here are a few things I've tried without success:

  1. Using background-size: contain

  2. Attempting to "lazy load" the background-image using JavaScript.

  3. Dynamically appending the image as an <img> instead of a background-image with JavaScript.

  4. Adding the image directly into the HTML document makes it display but ignores any CSS styling applied to it, even after adjusting with JavaScript and setting width and height attributes (why?).

  5. Trying background-position: top center instead of 50% 50%.

  6. Experimenting with different image formats such as .png.

  7. Applying the background-image to the ::after pseudo-element as shown below:

    #thumbnail::after {
    content: '';
    display: block;
    padding-top: 100%;
    background-image: url(...),
    background-size: cover,
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

None of these solutions seem to work properly.

I've searched both StackOverflow and Google for similar issues, but most references relate to problems in Safari browser or unsupported CSS properties, which doesn't appear to be my case.

If anyone has insights on what might be causing this issue and how to resolve it, I would greatly appreciate the help.

This problem specifically arises after using "Add to Home Screen". It functions perfectly well in iOS Safari and iOS Chrome browsers.

javascripthtmlioscsssafari

Answer №1

I encountered a situation reminiscent of this in the past.

The temporary solution we discovered was to eliminate the meta tag "apple-mobile-web-app-capable" and instead advise users to access it through Safari, where all functions operated smoothly.

Answer №2

Consider swapping out background-image: url(...) for background: url(...)

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

Creating identical class names for UL elements underneath LI using JavaScript

In my attempt to dynamically generate the class name within the ul element, I successfully achieved the expected result. The outcome can be viewed in the console of the snippet provided for reference. However, I'm facing a challenge when attempting t ...

javascripthtmlcssclassforeach

Using TypeScript for Immutable.js Record.set Type Validation

Currently, I'm utilizing Immutable.js alongside TypeScript for the development of a Redux application. In essence, the structure of my State object is as follows: const defaultState = { booleanValue: true, numberValue: 0, } const StateRecord = ...

javascripttypescriptreduximmutable.js

Using JSON data to populate the jQuery UI Datepicker

Is it possible to populate this jQuery UI datepicker calendar with data from a JSON file containing all non-working days for the years 2017 and 2018? P.S. return [!(month == 8 && day == 27), 'highlight', highlight]; - This example demons ...

javascriptjqueryhtmlcss

Discovering the art of line breaks

Imagine I have a random block of text displayed in a single line, like this: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Due to various reasons such as width settings or text-zoom, the text may display as two or more lines on the viewer&apos ...

javascriptjqueryhtmldomtext

When the user clicks on the body, I want the element to slide up, which will then slide down when the button is clicked

As a novice in Jquery, I am currently implementing a simple slide toggle on a button. Initially, the div is set to display none, and when the button is clicked, the slide toggle function is triggered. This works well. However, I also want the div to slide ...

jqueryhtmlcss

Troubleshooting Problem with Google Maps CSS

I'm in the process of constructing a website utilizing Foundation and have integrated Google Maps to showcase some markers on it. However, I've noticed that the map control elements in the top left corner (zoom in and zoom out) have disappeared, ...

cssgoogle-mapszurb-foundation

Retrieve information filtered based on the query parameter

Utilizing react hooks for dynamic data rendering, I am focusing on two main tasks: a. Extracting URL parameters from the component's history props. b. Retrieving state data from the component's history props, which provides an array of objects ...

javascriptreactjs

Can IE(7?) cause distortion of backgrounds from sprites?

This task is giving me a headache. We're almost finished with revamping our website. The last step involves consolidating all the glyphs and icons into a sprite. These images are transparent .png files, so we made sure the sprite maintains transparen ...

cssinternet-explorerbackground-imagesprite

Is it possible to access the CSS property from an external CSS file even when inline styles are used?

Is there a way to retrieve the css property from an external source using JavaScript or jQuery even if inline styles are applied to the same element? Here's an example: <div id="my" style='left:100px'>some content</div> <styl ...

jquerycss

Having difficulty getting the sign operator to show up in a text field

Whenever the ADD div is clicked, "+" should be displayed on the textbox. The same goes for SUBTRACT, MULTIPLY, and DIVIDE. However, I am struggling to make the operators show on the textbox. Here is what I have managed to come up with so far. <!D ...

javascripthtmlcss

injecting javascript dynamically using jquery

I am attempting to conditionally load a script in the case that the browser being used is IE8. To achieve this, I have employed jQuery's .getScript function as it allows me to execute certain actions after the script has been loaded. The issue lies in ...

javascriptjquery

Create a chessboard with a border using only HTML and CSS

I recently completed a chessboard using only HTML and CSS, but I am facing a challenge as I attempt to add a frame around the board. Since I lack design skills, I am struggling to achieve this simple task. I have tried utilizing the CSS border property wit ...

htmlcss

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

I am attempting to create an 8 x 8 grid. It's coming together, but the issue is that the first line only starts with one # sign. function print(msg) { console.log(msg); return msg; } let result = ""; for(let i=1; i<=8; i++) { result += ...

javascripthtmlcss

Preventing default behavior in a JQuery post request

Encountering an issue with jQuery functionality on a mobile device. function send() { $.post("scripts/post.php", { username: $("input[name=username]").val(), password: $("input[name=password]").val() }, function(data) { if ($(".data div" ...

javascriptjqueryhtmlpostinput

Combine the points of individual letters in Scrabble using jQuery

Hello, I'm currently working on creating a Scrabble game. My goal is to assign a value to each letter and then calculate the sum of these values when the input box changes. After some research, I was able to find information on how to add numbers on ...

jqueryhtml

"Dealing with an unspecified number of fields in an ExtJS data model

I have a data model that is designed to accommodate various incoming data by keeping it generic and allowing for the addition of multiple meta data tags to my project. How can I effectively map these data fields to the Model or access them in the array w ...

javascriptextjsextjs4.2

Successfully updating a document with Mongoose findByIdAndUpdate results in an error being returned

findByIdAndUpdate() function in my code successfully updates a document, but unexpectedly returns an error that I am having trouble understanding. Below is the schema that I am working with: const userSchema = mongoose.Schema({ phone: String, pas ...

javascriptnode.jsmongodbexpressmongoose

Tips for effectively managing asynchronous tasks

I keep getting different numbers every time my code runs. Can you tell me if I'm doing this the right way? Here's the code: export class GetPlanetsService { url='https://swapi.co/api/planets/?page='; planets:Planet[]=[]; headers: ...

javascriptangularrxjs

Remembering data in a lazy loaded AngularJs list

Encountering an issue with a lazy loaded list of books. Initially, 10 books are loaded and if the user scrolls down, the next 10 books are loaded. For example, if the user is on "page" 4 and clicks on the 35th book to view details, upon returning to the l ...

javascriptangularjscachinglazy-loading

How can we map a promise that resolves to foo to a new promise that resolves to bar?

I am working on a function that uses an XMLHttpRequest to retrieve data and returns a promise with the response. But now I want to modify it so that the promise only contains a specific string from the response. Instead of resolving to response = {status ...

javascriptvue.jsaxioses6-promise