Transitioning opacity and visibility in iOS CSS styling

Check out this test on a desktop browser by visiting the following link (JSFiddle):

a {
  background: gray;
  display: block;
  margin: 100px;
  padding: 100px;
}
a span {
  opacity: 0;
  -webkit-transition: 0.5s;
  visibility: hidden;
}
a:hover span {
  opacity: 1;
  -webkit-transition: 0.5s;
  visibility: visible;
}
<a href="#">a <span>span</span></a>

When you hover over the anchor element, the span element fades in as expected.

Now try accessing it from an iOS device. Observation: nothing happens.

Here are some observations:

  • If the transition property is not included, it works.
  • If either the opacity or visibility property is not included, it works.
  • The webkitTransitionEnd event is not triggered for the opacity or visibility property.

Are there any potential solutions to this issue?

cssiosmobilesafaricss-transitions

Answer №1

By making slight adjustments to the transition property, you can achieve functionality on iOS devices. Specifically, when using :hover, it is important to restrict the transition solely to the opacity property:

a:hover span {
    opacity:1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    visibility:visible;
}​

Although visibility can be animated, there appears to be an issue with how iOS handles this property during transitions. To ensure smooth functionality, it is recommended to focus the transition solely on the opacity attribute.

To clarify: Retain the visibility declaration in your CSS, but avoid transitioning it for optimal performance on Mobile Safari.

If needed, you can refer to the updated demo that has been tested on an iPad:

a {
  background: gray;
  display: block;
  margin: 100px;
  padding: 100px;
}
a span {
  opacity: 0;
  -webkit-transition: 0.5s;
  visibility: hidden;
}
a:hover span {
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  visibility: visible;
}
<a href="#">a <span>span</span></a>

Answer №2

Transitioning only opacity can be tricky.

To address the issue on iPhone where tapping is needed to focus an element, I came up with a solution:

.mydiv {
        visibility:hidden;
        opacity: 0;
        transition: all 1s ease-out; 
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
}
.mydiv:hover {
            visibility:visible;
            opacity: 1;
}
.mydiv:active {
            -webkit-transition: opacity 1s ease-out;
}

I specifically included the opacity transition in :active state.

This approach ensures smooth animation transitions (even for properties like height) are compatible with Chrome, Firefox, and iPhone tap actions.

Credit goes to Grezzo and Michael Martin-Smucker for pointing out the importance of the opacity transition.

(excerpted from my response on the topic at CSS animation visibility: visible; works on Chrome and Safari, but not on iOS)

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 loading icon in JavaScript failed to function when JavaScript was disabled in the browser

On my blogger website, I tried using JavaScript to display a loading icon until the page completely loads. However, this method did not work when JavaScript was disabled on the browser. Only CSS seems to provide a solution. document.onreadystatechange = ...

javascriptjqueryhtmlcssblogger

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

Utilizing the slick slider from http://kenwheeler.github.io/slick/ to display images of varying sizes, including both portrait and landscape pictures. These images are displayed as background-image properties of the div. By default, the slider has a fixed ...

javascriptcssslideraspect-ratioslick.js

distinguish different designs for individual components in Angular 5

My project is divided into two main parts: one for public web pages and the other for an admin control panel. Each part has its own set of CSS and javascript files for custom templates. If I include all CSS and js files in index.html, they all load at the ...

cssangularmodulebootstrap-4

Alteration of icon size in input field using jQuery unintentionally

My issue involves an input field where users can input text from an array of emojis. When a user selects an emoji, it should display as an icon styled by an external stylesheet. However, there are two problems: The name of the icon appears on top of the ...

jqueryhtmlcss

utilizing a dynamic value within CSS modules for class naming

Struggling to incorporate a variable into a CSS module class name in Next.js. Finding it challenging to determine the correct syntax. The variable is fetched from the API: const type = red Here's how I'm attempting to achieve it: <div clas ...

cssreactjsnext.jscss-modulesreact-css-modules

Having trouble with the sx selector not functioning properly with the Material UI DateTimePicker component

I'm currently working with a DateTimePicker component and I want to customize the color of all the days in the calendar to match the theme color: <DateTimePicker sx={{ "input": { color: "primary.main&quo ...

htmlcssreactjstypescriptmaterial-ui

What can I do to adjust the position of the div wrapper if the floating sidebar is taller than

Check out this example http://jsfiddle.net/NuzDj/ When you resize the window, the sidebar overlaps with the wrapper and footer. Is there a way to automatically adjust the height of the wrapper when the sidebar overlaps with it? ...

jqueryhtmlcss

Troubleshooting Safari compatibility issues with Python-Selenium action chains

Is there a way to successfully click on a menu and submenu using Selenium with Python on a Safari Webdriver? I have tried various methods with ActionChains, but nothing seems to be working. Am I missing something, or is this a compatibility issue with Safa ...

angularjspython-3.xseleniumsafari

Developing a notification system using Node.js for both Android and iOS devices

Looking to set up a push notification system in nodejs that will work well for both iOS and Android. After some research, it seems like this resource may be useful: If anyone has experience with this, I would appreciate advice on the best approach to impl ...

androidiosnode.jspush-notification

Striking a balance between innovation and backward compatibility in the realm of Web Design/Development

Creating websites is my passion, and I enjoy optimizing them for various platforms, devices, and browsers. However, lately, I've been feeling frustrated. I'm tired of facing limitations in implementing my creative ideas due to outdated technolog ...

javascripthtmlcss

How to Handle Nil Values for ViewController Object in iOS Swift3

let vcs = self.navigationController!.viewControllers for vc in vcs { if (vc.isKind(of: HomeViewController.self)) { bScreen = true self.navigationController?.popToViewController(vc, animated: true) } } if ...

iosswift

What is the best way to differentiate between two CSS elements with the same class name?

I ran into an issue where two elements share the same class name, specifically "img" Is it possible to apply different styles to these elements that are nested under different parent classes, despite having the same class name? I am trying to customize t ...

csscss-selectorsconditional-statements

Styling using CSS is effective only when applied locally, as it does not function properly on GitHub Pages

Although I have come across similar questions to the one I am facing, none of the solutions provided seem to work for me at the moment. My CSS file loads and functions as expected when tested locally, but once I upload it to GitHub, it stops working. In my ...

htmlcssgithub

What could be preventing the application of my skew via -ms-filter matrix in Internet Explorer?

After working on developing a website using Chrome and Firefox, I've come to realize that it appears broken when viewed on Internet Explorer. Fixing the issue is turning out to be more challenging than I had initially anticipated. The primary problem ...

cssinternet-explorerhtmlskew

How to centrally align grids in a material-ui react application

I'm trying to center Grid items horizontally inside a Grid container, while also adding some spacing between the items. Here's the code I have so far: import React from "react"; import { makeStyles } from "@material-ui/core/styles& ...

cssreactjsmaterial-uigrid

Responsive div not displaying background image

Here is a straightforward and easy-to-understand code snippet: HTML markup: <div class="jumbotron text-center top-jumbotron"> </div> CSS: .top-jumbotron { background: #ffcc00; background-image: url('../../bootstrap/img/home-pag ...

htmlcssresponsive-designbackground-image

I am attempting to integrate Stripe into my Flutter/iOS app, but I keep encountering errors in every generated file in the Pod. As a result, I am unable to successfully run the application

An error popped up in Xcode related to the Swift compiler, indicating a missing return statement in a closure that should return a 'String'. The file path where the error occurred is /Users/mac/Documents/Programming/Projects/yay_food/ios/Pods/Str ...

iosswiftflutterpodfileflutter-stripe

Angular - Modify the Background Color of a Table Row Upon Button Click

I am struggling to change the background color of only the selected row after clicking a button. Currently, my code changes the color of all rows. Here is a similar piece of code I have been working with: HTML <tr *ngFor="let data of (datas$ | asyn ...

cssangularhtml-tableangular8

What are some techniques I can use to ensure my image grid is responsive in html/css?

If you want to check out the website, you can visit . The main goal is to create an image grid for a portfolio. It appears really nice on a 1080p screen, but anything below that seems messy and unorganized. Any assistance or suggestions on how to improve ...

htmlcssimagestyles

How to disable the click handler of a div using only classes

Although I'm not an expert in HTML, I am eager to create a basic bootstrap button in HTML that can be enabled and disabled. My question relates to the following scenario: <div class="button" onClick=doSomething >My Button</div ...

csstwitter-bootstrapbootstrap-4