"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.

&: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

Encountering issues with implementing useStyles in Material-UI components

Currently, I am working on a project utilizing Material-UI's library and encountering styling issues. This project marks my initial venture into ReactJS and JavaScript in general. Therefore, any assistance would be greatly appreciated! I am struggli ...

cssreactjsmaterial-ui

PHP variable inaccessible

When using JQuery Ajax to call sessions variables from a PHP steamauth file, I encountered an issue. Even though the code works fine when "$data['test'] = "ok";" is used instead of "$data['test'] = $_SESSION['steamid'];", ther ...

phphtml

"Enhance Your Webpage with Textual Links that Display Background

A div with a background image is causing issues when links are placed on top of it. The links do not display the underline when hovering over them, unlike other links on the page. Below is the code snippet causing the problem: <div style="min-height:2 ...

htmlcsshyperlinkhover

The modal is functioning properly on Firefox and Internet Explorer, but it is experiencing issues

Having an issue with my modal not functioning properly in Chrome. When I click on it, only the background fades and both the before and after content load in the Chrome Dev tools simultaneously with no visible content in between. Here is a link to the Cod ...

javascriptcssmodal-dialog

Creating a scrollable panel using CSS is easy with a solid border and a panel element

Using Vaadin to design my front-end, I encountered an issue where adding border-style:solid to the style.css file resulted in a scrollable v-panel. How can I retain the solid style while removing the scrolling feature? Please refer to the screenshot for cl ...

cssformborderstyle

How come my label and input are showing up in my navigation bar?

For my assignment, I am designing a website layout and facing an issue where the text appears behind the navigation bar instead of below it. I have tried adjusting the margin-bottom to 50px with important tags and setting the nav bar as static. Despite tr ...

htmlcss

Directional Div CSS Transition

Is it feasible to determine the starting direction of a CSS transition? I've designed a div that enlarges in height when hovered over; however, it's situated at the bottom of the page, causing the scrollbar to extend downward. Ideally, I would ...

jquerycsstransitiondirection

What is the best way to combine multiple classes when declaring them in CSS?

I'm attempting to combine the following code snippets (possibly misunderstood the term) - is there a way to have them both perform the same function without creating another class with identical attributes? .games span { display: inline-block; ...

cssclassconcatenationhtml

Exclusive Design for Progress Bar in HTML and CSS

I am currently working on creating a unique progress bar with numbers at both ends, where the left number represents the current value and the right number represents the maximum or target value. Although I have managed to display the two numbers, I am fac ...

htmlcss

The CSS on my website is causing issues with the recaptcha functionality

Recently, I've been working on a website that requires spam protection for the contact form. To combat this issue, I decided to integrate reCAPTCHA into the form. However, after completing the form and applying the necessary CSS styles, I noticed tha ...

htmlcssiframe

Tips for removing borders around a textbox with a background image: When incorporating a background image into a

After removing the default borders on a textbox using outline:none;, I noticed that adding a background image caused the border to reappear, and I couldn't get rid of it! How can I solve this issue? Here is the code for the textbox: <input type = ...

htmlcss

The priority of custom attributes in HTML

There seems to be some ambiguity regarding whether data- attributes should be considered primary or secondary syntax. Is there a defined standard for this in major frameworks like Angular? For example, if an attribute is specified as both my-attr and dat ...

javascripthtmldom

Convert form data into JSON format while maintaining numerical values

One question that is frequently asked, but I have yet to find a solution for, is how to create a JSON body from a form in which the quotes are placed around the property names rather than the values. The desired JSON body should look like this: { "salary1 ...

htmljqueryjsonforms

Retrieve the customized attribute from the chosen option within the datalist

Is there a way to retrieve the custom attribute "location" of an option selected from a datalist and display it? I understand that for a select element we can use selectedIndex, but how can this be achieved with datalist? <!DOCTYPE html> <html&g ...

javascripthtml

Is it possible to set the input form to be read-only?

I need to create a "read-only" version of all my forms which contain multiple <input type="text"> fields. Instead of recoding each field individually, I'm looking for a more efficient solution. A suggestion was made to use the following: <xs ...

javascriptjqueryhtmlinput

Troubleshooting CSS3 pulse animation failure in Internet Explorer and Firefox

My animated background is looping infinitely and working perfectly in Chrome and Safari. However, I'm having trouble getting it to work in IE and FF. I've tried looking at other people's questions on this topic but still can't figure it ...

htmlcss

What is the method for reverting style properties back to their CSS defaults using Javascript?

The php-generated page contains multiple elements structured like this: <td class="defaultTDStyle" style="color:userDefinedCustomColor" id="myTDId"></td> There is a default style in place with additional styles ap ...

javascripthtmlcssdynamic-html

Changing the background color completely

Need help with CSS! I have two divs, one with a background color of #000 and the other with a transparent PNG image as the background. I want to override the background color with transparency from the PNG file so that the background doesn't cover th ...

htmlcss

Why is the last move of the previous player not displayed in this game of tic tac toe?

Why does the last move of the previous player not show up in this tic-tac-toe game? When it's the final turn, the square remains empty with neither an "O" nor an "X". What could be causing this issue? Here is the code snippet: The HTML code: <div ...

javascripthtmlcss

The layout of the table is not formatted in a single continuous line

I recently implemented the material-ui table and noticed that the header has a multiline break space. I am looking for a way to make it display in a single line instead. Is there any solution for achieving this using material UI or CSS? Feel free to chec ...

htmlcssreactjsmaterial-ui