Unusual illumination on Mobile Safari

Help needed with CSS highlight issue

Here is the CSS code causing the problem:

html {
            -webkit-tap-highlight-color: rgba(0,0,0,0.7);
            -webkit-touch-callout: none;
        }

This is my HTML snippet:

<a href="javascript: location.href = 'level://?id=123456';">
    <div class="Box" id="Box0">
        <table class="BoldText" style="margin:8px;">
            <tr>
                <td valign="top" width="50">
                    <div class="ProfileImage">
                        <div style="background:url(<url>) top left no-repeat;"></div>
                    </div>
                </td>
                <td>gustaf98 published a level
                    <div style="width:220px; margin-top:4px;" class="lightText">Skiftnyckel</div>
                </td>
            </tr>
        </table>
    </div>
</a>

However, when touched on an iPhone in a UIWebView, the black highlight only covers part of the box. How can I make it cover the whole box?

Your assistance would be greatly appreciated!

ioshtmlcssuiwebviewmobile-safari

Answer №1

Instead of applying this to the entire HTML, consider targeting a specific container with your CSS rules. Could you provide a demo or a link showcasing this in action?

Try limiting the styling to just the box that needs highlighting.

For instance...

.highlighted-box {
        -webkit-tap-highlight-color: rgba(0,0,0,0.7);
        -webkit-touch-callout: none;
    }

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

Issue with iOS xCode 13: Application unable to retrieve downloaded files using the "Open in..." sharing feature

When trying to implement the "Open in..." feature using file sharing options, our app is having trouble accessing downloaded files stored in "File Provider Storage." The FileManager.default.fileExists(atPath: url.path) method is returning false even thoug ...

iosiphonexcode13

Ignore one notification, but receive it again every day

I am developing an app that sends daily reminders to users, but I am struggling with implementing notifications based on specific conditions while the app is in the background. One solution could be to set up recurring notifications like this: notificatio ...

iosswiftnotifications

Submitting a form in React/Javascript: A step-by-step guide

I have a website on Wordpress where I am using the Wp-Polls plugin to vote. How can I submit a post request by accessing a form URL in a React project? Specifically, how can I vote for the "Bad" option with a value of 2? The HTML structure of the WordPre ...

javascripthtmlreactjs

Updating CSS using jQuery

Before I continue: While I am familiar with the jQuery.css() function, it unfortunately does not work in my particular case. Allow me to elaborate. Currently, I have a jQuery color picker set up to change the highlighting on a website. My goal is to utili ...

javascriptjquerycss

Angular's HTML attribute conditional rendering

I want to dynamically assign a property to an HTML tag in Angular based on a condition. Here's an example: <button {{condition === true ? mat-raised-button : mat-button}} class="edit-button" > <span>Click here</span ...

htmlangular

Transforming JSON data obtained from an HTTP request, which is in the form of a Dictionary of Dictionaries, into a single Array of

When making an http request and retrieving the data, it is displayed in the following manner. The request code is as follows: do { if let file = URL(string: "https://myhttprequest....") { let data = try Data(contentsOf: file) ...

iosarraysjsonswiftdictionary

Achieving maximum height in Tabs with react-bootstrap

Utilizing React Bootstrap, I have a full screen Modal with Tabs in its body. Within one of these Tabs, I aim to create a Lexical Editor that fills 100% of the width and height of the modal body with some margin. This is a simplified version of my code: F ...

cssreactjstabsheightbootstrap-5

What could be causing the CSS to not display properly on specific routes?

I'm facing an issue where CSS seems to be working fine for certain routes with node.js & express, but not for others. It's puzzling because the HTML file links to the same CSS file in both cases. For instance, CSS works perfectly for the route " ...

javascripthtmlcssnode.jsexpress

Two buttons next to each other positioned below my magnified picture

I'm currently working on implementing a feature where clicking an image enlarges it and displays two buttons at the bottom, but I'm facing some challenges with getting the buttons to show up. Any assistance would be greatly appreciated! Addition ...

javascripthtmlcssbuttonpopup

When hovering over the menu list, the background-color of the text area remains the same

I am facing an issue with my list menu. The hover effect changes the background color only in the box area, but not in the text area. I would like to figure out a way to make both areas change color on hover: Here is the code snippet: <div class="se ...

csslistmenubackgroundhover

Is it possible for a typo3 website to automatically redirect users to a mobile-friendly version?

I have put together a landing page for my website with numerous content elements using only HTML and then pasted it into my typo3 backend. I ended up with separate HTML codes for desktop view and mobile view because I couldn't figure out how to make t ...

javascripthtmlmobiletypo3responsive

Showing a database table in an HTML format using JavaScript

I am currently working on displaying a database table in HTML. I have written a PHP code snippet which retrieves the table data and formats it into an HTML table without any errors: function viewPlane() { if(!$this->DBLogin()) { $ ...

javascriptphpjqueryhtmlmysql

What could be causing certain items in my Bootstrap navbar to be hidden on mobile screens?

When I view my website on mobile devices, only the logo appears in the navbar, not the other elements. Can you help me troubleshoot this issue? NavBar HTML Code: .navbar-logo { width: 93.75px; height: 23.5px; margin-left: 10rem; } .navba ...

htmlcsstwitter-bootstrapbootstrap-5

Creating an HTML form that adjusts its size and layout based

Struggling to make my HTML Form responsive - it displays well on desktops, but not on mobile devices or tablets. Want to take a look at the code? Here's the link: JSFiddle I've attempted removing overflow: hidden and white-space: nowrap; from t ...

htmlcssformsresponsivebootstrap-5

What is the best way to align the text in the center without centering the numbers in an HTML ordered list?

I am currently working on a small widget for a webpage that displays steps in reverse order. My plan is to use an ol element and adjust the value attribute on each li tag to make the numbering of the ordered list reversed. Everything seems to be going smoo ...

htmlcss

What is the best way to retrieve and display data from a JSON object that has been encoded using json_encode on one page.php, in another page.php?

I have a specific requirement that involves calling JSON data from one PHP page and displaying it on another PHP page. Can someone guide me on how to achieve this? Below is the JSON code that I need to retrieve: <?php include("Connect.php"); $Db = m ...

phpjqueryhtmlajaxjson

Obtaining Beverage Overall with Loop

I am currently using a function to calculate the total of each drink, with a total of 5 drinks: var totalEstimate = 0; var locoCost = 0; var blackCost = 0; function calcLoco() { totalEstimate -= locoCost; locoCost = docume ...

javascripthtmlloops

Retrieve the image source, but only select one if there are multiple sources available

Trying to utilize jQuery to retrieve the image src, I have the following code: HTML <div class="post_container"> <img src="http://imageurl.com"> </div> <div class="appendedimageContainer"></div> Javascript var imageSrc ...

javascriptjqueryhtml

Recreated using CSS and JavaScript: iOS "Background Open" Animation

I am currently seeking a method to replicate the iOS Safari animation that occurs when opening a link in the background (the item jumps up and quickly animates to where it can be accessed) - This same animation is also seen on OSX Safari's "save to re ...

javascriptioscssanimationweb-applications

Adding JavaScript to dynamically loaded AJAX content

I'm new to AJAX and JavaScript and unsure of how to get it working. Here is the website: When you click on portfolio images, the details load via AJAX. I want to create a slideshow for projects with multiple full-sized images. However, due to the co ...

javascriptjqueryhtmlajaxwordpress