Enhance your iPad's design with a stylish div box-shadow

I'm in the process of developing a touch-optimized web application. As part of the design concept, I've implemented some visually appealing div elements that respond to clicks or touches for easy navigation.

While this functionality works perfectly on computer and Android browsers, I've encountered an issue when using Safari on an iPad - the shadow effect is not displaying as intended. Despite checking my syntax, it appears to be either a bug or lack of support.

Has anyone else faced this issue and found a solution or workaround?

Here's the jsFiddle link for reference

CSS:

div.touch-button:active {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

div.touch-button {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
htmliosipadcss

Answer №1

Applying box shadow before -moz-box-shadow and -webkit-box-shadow is the key to solving this issue. I have successfully used this technique in the past.

div.touch-button {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;    
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Answer №2

To customize the appearance, you can use -webkit-appearance: none; like in the example below:

div.custom-button {
    width: 200px;
    border: 2px solid #333;
    padding: 15px;
    -webkit-appearance: none;
    -moz-box-shadow: 0 0 8px rgba(0,0,0,0.7);
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.7);
    box-shadow: 0 0 8px rgba(0,0,0,0.7);
}

div.custom-button:hover {
    background-color: #f1f1f1;
}

Answer №3

Finally, after a long struggle and frustration, I stumbled upon the solution while attempting to fix a different problem.

The issue was actually related to the viewport settings.

INCORRECT: 

<meta name="viewport" content="width=device-width" />

CORRECTED: 

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

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

The hamburger icon on my website is not appearing even after implementing the media query

Despite adjusting the media query, I'm facing an issue with displaying the hamburger menu. Although the navbar links disappear correctly, the menu itself refuses to show up. *, *::after, *::before { box-sizing: border-box; margin: 0; paddin ...

htmlcssmedia-queriesnavbarhamburger-menu

A guide to resolving the issue of spacing out three adjacent elements in HTML/CSS

As I work on creating my personal website, I have encountered an issue with three elements that are supposed to be side-by-side. My desired structure is depicted in this link: However, the middle element is not responding to margin adjustments as expected ...

htmlcss

What is the best way to generate an extensive table with HTML and AngularJS?

I am looking to implement an expandable table feature where a single header with a plus icon can be clicked to reveal the child rows beneath it. Currently, I have been able to achieve this functionality. However, I am facing an issue where the child rows ...

javascripthtmlangularjs

I need the links to open up the content area on the website in HTML

Is it possible to have a fixed header that does not disappear when clicking links from the navigation bar? I tried dividing the page into tables to achieve this. Now, I want to open the links in the navigation bar in the right column (the main content col ...

phphtmlcss

What can be done to ensure that the a href tag is functioning as clickable?

Having an issue with my HTML and CSS code for a notification dropdown box. I am unable to click the tag, even after attempting to use JavaScript. Can't seem to figure out what's causing this problem. Any advice on how to make the tag clickable? ...

javascriptphpjqueryhtmlcss

Even if there is no overflow, the scroll bar will always be visible with the

I'm currently working on a project titled "Scrolling JQuery Mobile Panel Apart from Content", and you can check out my progress here. In order to achieve what I want, I have applied the following CSS code. However, I am facing an issue where the over ...

cssjquery-mobile

Learn how to efficiently execute a function multiple times using pure JavaScript

I am trying to create a tabbed content functionality with multiple elements. How can I utilize the same function for various elements declared in a variable? For example, I want to clone the parent div.tabs element with similar content but different ids an ...

javascripthtmlclick

Is there a way to replace the default Laravel pagination CSS class with a custom theme CSS class?

Is there a way to update my Laravel pagination CSS to match my theme's CSS? I need help with this adjustment. Here is the HTML for the theme's CSS: <div class="row mt-5"> <div class="col text-center"> ...

htmlcsslaravellaravel-blade

Transferring content from a div class to an input class

I am seeking help to extract text from a div class and transfer it to an input class. Here is the code I have written: import os import time from selenium import webdriver from pyvirtualdisplay import Display from selenium.webdriver.common.by import By fr ...

pythonhtmlseleniumselenium-webdriver

Jquery Menu featuring subitems aligned to the right

I am experiencing an issue with my drop-down menu in ie6. The subitems menus are shifted to the right, rendering the menu useless. Here is the HTML code: <div id="navigation"> <a href="<?php echo base_url();?>" class="singl ...

jquerycssmenu

The shading of the box isn't displaying the correct color in Microsoft Edge and IE 11

I have a unique pattern consisting mainly of white and grey hues. To add a touch of color, I am using the box shadow property in CSS to apply a blue filter effect. This technique successfully displays the desired result in Firefox and Chrome browsers. Howe ...

cssinternet-explorermicrosoft-edge

What could be causing the misalignment of my select box in Bootstrap framework?

I'm currently trying to replicate the layout of the second image shown below, as seen in the first image. However, I'm facing an issue with the positioning of the selection box and I can't seem to figure out why. I've experimented wit ...

htmlcssbootstrap-4

Activate jquery code during interaction

I am in need of a scalable image that can be centered within a scalable <div>. Currently, I have a wrapper <div> along with the scalable <div> that contains the image. Additionally, there is some jQuery code in place to calculate the widt ...

jqueryhtmlcss

Is there a way to prevent the text in my text boxes from staying there when I refresh the page?

Currently working on an HTML5 project with Javascript, here is a snippet of my code: Your inquiry <textarea type="text" name="phrase" id="phrase" cols="50" rows="5" placeholder="Write your text here. . ."></textarea> I am looking for a way ...

javascripthtmltextarea

Video embedded in a plain CSS popup that automatically starts playing even before the popup is triggered

My goal is to incorporate a video into a minimalist CSS modal window, following the guidance provided here. While the setup works well overall, I encounter a issue where the video starts playing before the modal window is opened (I need to maintain the "au ...

htmlcssmodal-dialog

Ways to display an error message in Angular 8 when entering anything other than numbers in a text box

In my Angular 8 application, I have a text box that only allows the user to type numbers. If they try to type an alphabet or special character, it should display an error message below the text box. The error message should disappear once the user starts ...

htmlangulartypescript

Appending a forward slash at the end of a URL seamlessly directs the user to a serendipitous webpage experience, while

I'm currently developing a project on this website: Interestingly, when you append a forward slash to the end of the URL, all the images mysteriously disappear. Consequently, I am unable to include Google AdWords tracking code at the end of any URLs: ...

javascripthtml.htaccesstracking

The frozen first column in a CSS table does not have consistent height with the rest of the row

Having trouble with freezing the first column of a table and aligning the height of the first cell with the rest of the row? Check out the issue in the image below: https://i.sstatic.net/v5xHU.png For a live example, you can also visit this jsfiddle link ...

htmlcss

In a Next JS project, the CSS Transition fails to activate when a class is dynamically added

In my Next.js project with Tailwind styling, I encountered an issue when using the globals.css file for more complex non-Tailwind CSS styling on a component. To better understand the problem, you can view the Code Sandbox here: https://codesandbox.io/p/sa ...

cssreactjsnext.jstailwind-css

Adjusting height dynamically with CSS based on font size

Below is a link followed by a span element <a href="#" style="display:inline-block;font-size:900%">12</a> <span display="block">ACTIVE</span> The issue arises when the 'a' element does not have a specific height, causing ...

cssheight