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

Create dynamic animations using AngularJS to transition between different states within an ng-repeat loop

Here's a simplified explanation of my current dilemma: I have an array containing a list of items that are being displayed in an Angular view using ng-repeat, like... <li ng-repeat="item in items"> <div class="bar" ng-style="{'width ...

javascriptcssangularjscss-animations

Resetting CSS animations using animation-delay

My aim is to animate a series of images on my landing page using Next.js and SCSS. The issue arises when I try to add dynamic animations that reset after each cycle. The delay in the animation causes the reset to also be delayed, which disrupts the flow. I ...

cssanimationnext.jssasscss-animations

When attempting to execute a script that includes document.write, it will not function as expected

Our web program is utilizing ajax and jquery, specifically Netsuite. I've been attempting to adjust elements on a page using document.ready and window.load methods in order to load an external script onto the page. Regardless of whether I load this ex ...

javascriptjqueryhtmlnetsuite

Increasing the boundary width beyond a specified limit with CSS

Need help extending the border-top of an element beyond a container width set to 1024px, while maintaining center alignment on the page with left alignment. Thank you! Here is the code snippet: HTML <main> <div> <span>Hello& ...

htmlcss

Tips for creating dynamic rope animations with canvas and CSS3 styling

Interested in creating a canvas animation, or possibly using CSS3 for the same purpose. Looking to add an automatic rope animation, similar to it swaying gently. I've searched for scripts and other solutions, but haven't found anything suitable. ...

htmlipadcsscanvasjquery-animate

What is the number of steps jQuery animates in?

Exploring my creative side, I decided to create my own custom animate function. Struggling to achieve a seamless animation effect, unlike the smooth transitions produced by jQuery. I'm curious about the formula they utilize to determine the ideal num ...

javascriptjquerycssalgorithmanimation

Dynamically extract key values from JSON data and display them on an HTML page with checkboxes for selection. Generate a new JSON object containing

I am facing the challenge of parsing an unknown JSON with uncertain key-value pairs. As I do not have prior knowledge of the keys to access, my goal is to traverse through every key in the JSON and display all keys and their corresponding values on the scr ...

javascriptjqueryhtmljson

concealing elements using negative margins on tablet devices

I have an animated element on the ipad, moving from -200px to 1500px and being hidden due to overflow-x:hidden in the browser. However, when viewing this on the ipad, I am able to scroll "off screen" and reveal the hidden items, despite setting the body a ...

cssipadcss-transformsmargins

Add JavaScript and CSS files from the node_modules folder to enhance a static HTML webpage

Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server. Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this: <link ...

cssnode.jsnpm

Having trouble with CSS :before pseudo-element and sibling selector?

Looking for a CSS solution to change the appearance of a triangle when the .hide class is activated within my markup. I attempted using a pseudo-element like so: summary:before { content: '\25BC'; } summary:before + .hide { con ...

css

Is it possible for images underneath to receive focus when hovering over them?

I'm struggling with a layout of thumbnails on my page. We'll refer to them as A, B, C, etc. They are currently displayed like this: A, B, C, D, E, F, G, H, I, J, K, L, M, N... and so on. When you hover over one thumbnail, it enlarges by 2.5 t ...

javascriptjqueryhtmlcss

The height of the TinyMCE editor refuses to adjust

Hello, I'm new to utilizing Tinymce within an AngularJS environment. Specifically, I am working with the Tinymce library version 4.3.13. I have constructed some HTML and angularJS code to implement the Tinymce editor, but I've encountered a probl ...

htmlangularjstinymcetinymce-4

What's the reason why Angular stops flickering with the use of "/" in href?

Recently, I've come across a peculiar issue in one of my web applications while using Angular's routeProvider as a template engine. The app functions properly, but the behavior seems inexplicable to me. The problem arises during page transitions ...

javascripthtmlangularjscss

Stopping an HTML5 range input at a specific number: Tips and tricks

Does anyone have suggestions on how to use angularjs to stop a range slider at 75? I attempted it but it doesn't seem like the best approach. Any guidance would be appreciated. [EDIT for clarification after max=75 answer] Just to clarify, I want to di ...

javascriptangularjshtmlhtml-input

What is the best way to iterate through only the selected checkboxes to calculate their

I am in need of calculating the selected checkboxes only within a table field (harga_obat*jumlah) Below is my foreach data: @foreach ($obat as $o) <tr> <td> <input id="check" type="checkbox" name="select[]" value="{{ $o->nam ...

javascripthtmllaravelcheckbox

What is the best way to arrange an unordered list in a horizontal layout?

I have four lists that I want to display side by side. The first row should show a Doctor and Patient side by side, the second row should show a Pharma Company and Employee side by side. However, in my code, this layout is not working as intended. .tree ...

htmlcss

Using jQuery to add a class to an image element when the source attribute contains a specific

I have a bunch of text that looks like this <div id="justThisDIV"><p>Some paragraph <img src="http://mydomain.com/image.jpg"/> </p> <p><img src="http://mydomain.com/wow.png"/></p> <p><img src="http://notm ...

jquerycss

A single image with dual clickable areas managed by an interactive image map

Is there a way to attach two href links to one image using CSS? I want it to function like an old school image map, but purely with CSS. Is this something that can be done? The current HTML code looks like the example below. However, I need the image to h ...

htmlcssimagemap

Switch Image to Background Image on Mobile Devices

I am currently working on a website that needs a special page for an upcoming event. Typically, the pages on this site have a mast banner image that stretches across the full width of the page. However, for this particular page, it is necessary for the ima ...

cssdrupalresponsive-design

pictures on the blog entries

I'm looking to customize the look of images within a section. I want to add borders to the images, but since they are being added dynamically as content in blog posts, I can't reference them directly. Can you recommend a way for me to achieve thi ...

htmlcss