"Uncovering the ways iOS disrupts background-size functionality

I am currently working on creating several marked images that will adjust in size to fit the length of their content. This functionality works well on most browsers, except for those on iOS devices like iPhone and iPad.

Take a look at the image-link below to see how it appears on an iPad (top marked image) compared to how it should appear (and does on Windows and other browsers).

If anyone has a solution to this issue or can explain why it is only occurring on iOS, I would greatly appreciate it.

https://i.sstatic.net/rFg6c.png

&:after {
      content: '';
      position: absolute;

      top: -5px;
      left: -10px;
      width: 100%;
      height: 47px;
      z-index: -1;
      background-size: 100% 47px;
      @include bg-retina('~img/layout/block-subtitle-light-blue', 'png', 158px, 47px);
    }
htmlioscssiphoneipad

Answer №1

Successfully resolved the issue.

Implemented a media query to determine if the device has a retina display.

$retina: 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)';

&:after {
    content: '';
    position: absolute;

    top: 5px;
    left: 0;
    width: 0;
    height: 36px;
    display: block;
    opacity: 0;
    z-index: -1;
    transition: width ease .4s, opacity ease .4s;
    background: url(~img/layout/menu-hover.png) 0 0 / 100% 36px repeat-x;

    @media #{$retina} {
      background-image: url(~img/layout/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab7bfb4aff7b2b5acbfa89ae8a2f4aab4bd">[email protected]</a>);
    }
  }

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

Discovering the position of elements in relation to their (grand^N)parent

Among my possessions are elements A and B. B has the ability to exist as a direct child of A, or there may be anywhere from 0 to N elements separating them. It is imperative that I determine how B is situated in relation to A, specifically noting the dist ...

javascriptjqueryhtml

Is there a way to create a blurred background effect while the popup is in use?

I prefer my popup to have a dark or blurred background when active. The popup itself should remain the same, with only the background being darkened. I would like a dark layer overlaying the entire page. This script should be compatible with any website wh ...

javascriptcss

What is the best way to access the display property of a DOM element?

<html> <style type="text/css"> a { display: none; } </style> <body> <p id="p"> a paragraph </p> <a href="http://www.google.com" id="a">google</a> &l ...

javascriptcssdom

Step by step guide on how to connect a stylesheet in CSS

Hey there, I recently attempted to link a style sheet in my HTML for the first time. Unfortunately, I encountered an issue where it didn't work. Here's the code I used: <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" /> W ...

htmlcssbackground

VueJS can manipulate an inline template by dynamically changing its content and reinitializing

this particular query shares similarities with the discussions on VueJS re-compiling HTML in an inline-template component as well as How to implement Vue js directive in an appended html element Regrettably, the approach suggested in those threads is no l ...

javascripthtmlvue.js

The ng-bind directive is functional when used with a textarea element, but it does not work with

Recently diving into the world of angularjs, I stumbled upon ng-bind and its interesting functionality when used as a directive for textarea: <input type="text" ng-model="review.start"/> <textarea ng-bind="review.start"> </textarea> I ...

javascripthtmlangularjs

Retrieve the stylesheet based on the presence of a specific class

Is there a way to dynamically add a CSS stylesheet based on the presence of a specific class on a page? For example, instead of checking the time and loading different stylesheets, I want to load different stylesheets depending on the class present in the ...

javascriptcssfunctionif-statement

Utilizing Fullcalendar v5's sticky header feature alongside a Bootstrap fixed top navigation bar for a seamless

Currently experimenting with the latest version of fullcalendar 5.4.0. I have integrated the calendar into a bootstrap 4 web page that features a fixed navigation bar at the top. The issue arises when attempting to set stickyHeaderDates, aiming to keep th ...

htmlcsstwitter-bootstrapfullcalendarfullcalendar-5

Guide on how to align h1 in the navigation bar

I've been attempting to center text on a nav bar but haven't been successful. What could I be overlooking? // include external modules import React, { Component } from "react"; import { Navbar } from "reactstrap"; import { Menu } from " ...

javascripthtmlcssreactjs

Customize specific styles for individual divs one at a time (without the use of jQuery)

Can you assist me with this issue? I am trying to display the <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> tag (initially set to "visibility: hidden") when clicking on a div with the class "role-box". He ...

javascripthtmlangular

Tips for aligning two divs side by side: Ensure one of the divs is centered within the container that holds both divs

How would you align two divs next to each other, with one of them centered within the container? I'm trying to figure out how to position the second div right beside the first one and have it expand to the right. Any ideas? Check out this example : ...

csshtml

How to eliminate a particular item within a string only in rows that include a different specific item using JavaScript

Is my question clear? Here's an example to illustrate: let string = "Test text ab/c test Test t/est ### Test/ Test t/test Test test" I want to remove / only from the line that includes ###, like so: Test text ab/c test Test t/est ### Test T ...

javascripthtmlregexstring

changing the Almofire JSON answer into a variable

I have posted my question multiple times on stackoverflow, but none of the solutions provided worked for me. So I am summarizing my question here and trying to explain it more clearly. My app is sending a picture to a Python backend for image recognition ...

iosjsonswiftalamofire

When the screen is minimized, my website doesn't align to the center as expected

When the screen is maximized everything looks great, but when I minimize it, the content doesn't center. I tried using margin: auto; in the "main-div" class, but then everything shifted to the top left corner. So, I added a "wrapper-div" to contain th ...

htmlcss

ACTUAL preventing a component from losing its focus

I have been exploring ways to effectively stop a DOM element from losing focus. While researching, I came across different solutions on StackOverflow such as: StackOverflow solution 1 StackOverflow solution 2 StackOverflow solution 3 However, these sol ...

javascriptjqueryhtmlfocus

Custom titanium grip for processing JSON data in HTML forms

I recently implemented a JSON API plugin for my Wordpress site, which retrieves all the posts. Within my Titanium Alloy project, I am fetching the JSON and parsing it to display in a tableview. However, I encountered an issue where special characters lik ...

phpandroidiosjsontitanium

A div positioned in front of a centrally-located div

Managing a website with numerous headlines can be a challenge. When a user clicks on a headline, a button located 10px to the left of the headline should appear. However, the catch is that the headlines must always remain centered, regardless of whether th ...

javascriptjqueryhtmlcss

Display various divs simultaneously based on the quantity of items in the dropdown menu

In my project, there is a dynamic select list that retrieves items from the database. Users have the ability to add or delete items from this list. Below is some code related to this functionality: <div class="form-group col-md-3"> <la ...

javascripthtmljquerysynchronous

Instructions for making a crossword-inspired grid using a high quantity of divs or alternative elements

I am looking to create a grid on the screen of a web browser or mobile device, with each grid item containing just one letter. It's similar to a crossword puzzle, but taking up most of the screen. I've tried using divs for this purpose, but it se ...

javascripthtmlcssweb

Stylish Dropdown Menu with Regular Buttons

Currently, all buttons have a hovering effect, but I only want one button to behave this way. I need two buttons to immediately redirect to another page upon clicking, without any hover effect. The CSS styling code has been provided below: #wrapper { ...

css