"My iPhone is displaying various outcomes when it comes to my CSS overlay on top of an

Here is a visual example illustrating the difference: https://ibb.co/k6dJqyp

I'm encountering an issue with the overlay on the image, specifically why the overlay appears longer than the image on iPhone devices.

After testing on various devices, I have been unable to replicate the issue experienced on the iPhone. I also attempted to simulate it using browser dev tools for phone resizing, but without success.

UPDATE: The problem has been resolved, thanks to safwan's suggestion below. By utilizing the CSS Safari hack targeting the specific element, the necessary changes were successfully implemented on Safari :)

htmlcss

Answer №1

Every web browser interprets CSS in its own unique way. While you can utilize CSS hacks to target Safari specifically as detailed here, it can be quite intricate. Instead, I recommend using JavaScript to detect the browser. For a comprehensive guide on how to identify the browser, refer to this post. Nevertheless, here is the actual function.

function findBrowser() {
    var ua = navigator.userAgent, tem,
    M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem =  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+( tem[1] || '');
    }
    if(M[1] === 'Chrome'){
        tem = ua.match(/\b(OPR|Edge?)\/(\d+)/);
        if(tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera').replace('Edg ', 'Edge ');            
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
}

if(findBrowser() === 'Safari 13') {
    document.querySelector('img').classList.add("inSafari"); 
}

Update 'Safari 13' with the specific version of Safari causing issues.

Subsequently, in your CSS file:

.inSafari {
    ...
}

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

Upon clicking the "show more information" button on the page, JavaScript executes the function to display additional details

<a href="#" class="button">Read More</a><br> I'm currently struggling with programming a button on my website. Specifically, I need the Read More button to display all information related to the CDs I have for sale when clicked. A ...

javascripthtml

Creating a dynamic and interactive table with Angular and the amazing angular-responsive-tables library

I am currently working on creating a responsive table using AngularJS. To demonstrate what I am trying to achieve, I have put together an example in this fiddle: https://jsfiddle.net/loredano/xnyzaLnu/1/ <tr ng-repeat="product in products" > &l ...

htmlcssangularjs

Arrange elements within a division when the division splits into two rows

Currently in my setup: I have a navigation bar with a group of buttons located on the right-hand side. When the navbar is reduced to a smaller size, like on a smartphone, the two buttons get split across 2 rows within the div. In this state, I'm ai ...

htmlcssbootstrap-5

trouble centering elements in bootstrap

It appears that when I try to center this image, it is slightly off-center to the right on the page. What could be causing this? It seems like there might be a margin added to the left of the image. <head> <meta charset="utf-8"> ...

htmlcsstwitter-bootstrap

Stopping videos in the JQuery Cycle Plugin triggers the stop event

Currently, I have a simple cycle set up with YouTube videos using the following code: <script type="text/javascript"> $(document).ready(function () { $('#cycle').cycle({ fx: 'fade', sp ...

javascripthtmljqueryjquery-events

Using R Markdown and Hugo to Style Blog Titles

I am currently utilizing Hugo and Blogdown to craft a blog following the guidelines outlined here. The title of my blog is specified at the beginning of each post, resembling the example below: --- title: One Two Three author: First Last date: '2019- ...

cssr-markdownhugoblogdown

Attempting to showcase a pair of unordered lists side by side using the power of flexbox

I am having trouble getting this to display on a single line, no matter what I try. While there may be simpler ways to achieve this without using flexbox, I am eager to learn how to do it using flexbox properties. My desired outcome is to have the first u ...

htmlcssflexbox

Encountering an issue with Bootstrap and Sass when trying to convert SCSS files to CSS due to an error involving an undefined variable @each $color, $value in $theme-colors

I have a goal to reduce the size of the bootstrap file bootstrap.min.css. After some research, I discovered that utilizing SASS and then SCSS is an effective method to achieve this by importing only the specific components needed. Despite my previous exper ...

csstwitter-bootstrapbootstrap-4sassbootstrap-5

Retrieve data from an HTML table using PHP

This snippet of code is encapsulated within table tags and retrieves data from a database to populate the table. Within the database, there is an auto-increment column named 'id'. The objective is to obtain the 'id' value associated wit ...

phphtmlmysql

Is there a way to prevent my smartchatbox from covering my fixed top navbar?

Click here for more information I am seeking assistance. Your help is greatly appreciated. The question's heading reveals all you need to know. All you have to do is resize your browser, scroll down, and the answer will become apparent. ...

javascripthtmlchat

Is it possible that using vim omni-complete will remove the word that I had previously selected

When writing HTML with gvim, I find it frustrating that the omni-complete feature always deletes my previous word and even my previously selected ones. For example, let's say I'm in the middle of writing the following code**('_' indica ...

htmlvimomnicomplete

If the value of the input matches, set the checkbox to be

I have successfully implemented functionality that allows the value of an input to be changed by clicking a checkbox. This works without any issues. Now, I am facing the challenge of automatically checking the checkbox when the page loads, but only if the ...

javascriptjqueryhtmlcheckbox

Does IE 9 support endless local storage capacity?

I recently updated my HTML5 persistent storage (localStorage) capacity testing to address a memory exception issue in the previous version. I even created a jsFiddle showcasing it: http://jsfiddle.net/rxTkZ/4/ The testing code involves a loop: var val ...

javascripthtmlinternet-explorer-9local-storage

Encountering an issue of receiving undefined while attempting to retrieve the attribute of a

At first, there was just a single upload button for a photo The setup looked like this, with the script tailored specifically for that ID <div class="field"> <label>Photos</label> <div class="field_info" da ...

javascripthtmljquery

Explain the assigned identifier for the input parameter

Trying to send data (Collection<Cars>) using AJAX with JQuery, but struggling to define the object in my Action input parameter. I attempted to define it as FormCollection and received all data successfully. However, my goal is to define it as IColle ...

jqueryhtmlajaxasp.net-mvc-3asp.net-mvc-4

I am facing issues with the CSS inline display property and unable to get it to

I am having trouble aligning the section element in a row using the display: inline-block; property. Here is what I have tried: https://i.sstatic.net/JB1Y2.jpg Despite my efforts, I can't seem to get it to work as expected. Below are snippets of bot ...

htmlcss

Video with dynamic sizing doesn't adapt properly

I successfully achieved my main goal, which was to have a background video at the top of my page. However, I am facing an issue with making the video responsive. Currently, as I decrease the screen size, the video shrinks in both width and height rather th ...

htmlcsstwitter-bootstrapvideoresponsive-design

Guide to utilizing JavaScript in Bootstrap

Welcome! I'm eager to delve into the world of webjars. To kick things off, I've included these dependencies in my Gradle project: implementation group: 'org.webjars', name: 'webjars-locator', version: '0.52' implemen ...

javascriptjavahtmlspringbootstrap-5

Form Validation Issues Detected

Could someone help explain why the code below is causing an error according to W3C guidelines: <form id="" method="post" action="" /> <input type="text" name="" title="" tabindex="10" class="" /> <inp ...

phphtmlcss

Top method for individually choosing multiple selections from a foreach loop output

Need help with a loop: foreach ($userItems_get as $item => $value) { if ($value['prefab'] == 'wearable') { echo $value['name'] . "</br>"; echo "<img src=\"{$value['image_invent ...

javascriptphphtmlselectforeach