Safari is struggling with the backface visibility feature not functioning as expected

I have implemented a cssflip animation in my code where the element rotates on hover. I included transition and backface-visibilty properties. While it works well on Chrome, I faced issues with Safari. I even added the webkit prefix for Safari browser.

`.card-container{

margin-top: 9%;
perspective: 900px;
-webkit-perspective: 900px;
z-index: 1;

}

.card{

float: left;
width: 78.5%;
height: 35%;
margin-top: 25%;
border: 1px solid #A08C87;
transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;

}

#front #back{

color: white;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;

}

front{

backface-visibility: hidden;
-webkit-backface-visibility: hidden;

}

back{

display: flex;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
font-size: 20px;

} .card-container:hover .card{

transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);

}

back{

transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);

}`

javascripthtmlcsssafari

Answer №1

The issue at hand seems to be related to the 

backface-visibility: hidden;

Unfortunately, this property is not fully supported in iOS and Safari browsers.

To resolve this, simply update your code with the following:

#front #back {
    color: white;
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    visibility: visible;
    backface-visibility: hidden;
}

I trust this solution will assist you in resolving the issue.

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

Height of the liquid division

I'm encountering an issue with my CSS layout. I have a container containing two columns, each styled with the following CSS: #project-desc{ float: left; width: 500px; } #project-images{ float: right; width: 300px; } I've use ...

phphtmlcsscss-float

What is the best way to display my icon <div>s side by side instead of on top of each other?

I am facing an issue with the following code: <a href="#"><div class="iconFriends"></div></a> <a href="#"><div class="iconFavorite"></div></a> <a href="#"><div class="iconPM"></div></a&g ...

htmlcss

"Major issues arise as CSS3 Animation fails to function properly across all web

I have been experimenting with using a sprite and CSS3 animation to create a rollover effect. While it seems to be working in CODA 2, I'm encountering issues when testing in Mozilla, Chrome, Safari, and Opera as the animation fails to trigger. /*link ...

cssspritecss-animations

How to eliminate space preceding a div using jQuery?

I am trying to modify the following code snippet: <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> Is there a method for me to eliminate the space before div "three" in order to achieve this result: ...

javascriptjquery

Issues with CSS transitions/animations not functioning properly across different browsers

Take a look at this FIDDLE Link. I'm facing an issue where the animation works smoothly in Firefox, but it's not functioning as expected in Chrome. Kindly open the fiddle in both browsers (Chrome and Firefox), hover over the image, and notice t ...

htmlcss

express includes a 500 error due to the .html extension for the view engine

I have an express app where I've configured my views to use HTML, but behind the scenes, I'm actually utilizing the ejs engine in order to maintain the .html extension. Here is how it's currently set up: app.set('views', path.join ...

javascriptnode.jsexpressejs

Having trouble with implementing a 64-bit bitwise AND operation in JavaScript?

I've been attempting to perform a bitwise AND operation on long numbers using Javascript. Despite trying the solutions provided at (How to do bitwise AND in javascript on variables that are longer than 32 bit?), none of them have been accurate for the ...

javascriptangularjsbitwise-operators

Verify that all keys of an object are present as values in an array of objects

Imagine having two entities like the following: const obj1 = {key1: "", key2: "", key3: ""}; const array2 = [ { name: "key1", }] Is there a way to verify if array2 contains an object with the same name as ea ...

javascript

Make sure to use the jQuery load function to specifically target and retrieve

Hello, I'm new to working with jQuery and I have a question about adding a vertical scrollbar to a jQuery modal window. Specifically, I want the scrollbar to appear when there is a large amount of text within the modal window. Can you guide me on wher ...

jquerycssscrollbarmodal-dialog

What is the best way to achieve rounded table borders without duplicating them or relying on border-collapse?

After discovering a helpful Stack Overflow answer regarding rounding table corners, I attempted to implement the provided CSS code: /* table { border-collapse: collapse; }*/ table, tr, td, th{ border: 1px solid; text-align: center; /*paddin ...

htmlcsshtml-table

AngularJS SmartyUI position not dynamically updating on SmartyStreets plugin

In my angularJS application, I am utilizing SmartyStreets' LiveAddress for address validation and autofilling two fields in a form. After the user submits the form, a message (either success or failure) is displayed in a div above the form. However, t ...

javascriptangularjssmartystreets

retrieving the values listed on the current v-data-table page

In my vuejs2 project, I am utilizing a v-data-table to display information in columns about a large number of users. Each page shows 25 users, with a total exceeding 60,000 individuals. I am wondering if there is a way to retrieve the list of users curre ...

javascriptvue.jsvuejs2vuetify.jsv-data-table

Maintaining the relative position of an SVG while scaling within a div element

I am in the process of incorporating my custom SVG knob icons into an electron application using flexbox. The challenge lies in keeping them centered within the rectangle icon regardless of browser size, as shown here. Ideally, the icons should adjust thei ...

htmlcsssvgelectronscaling

Utilize the return function in a separate PHP file

I wanted to create a basic login form as a way to dive into learning php. After setting up the form, I wrote a function that sends a query to a MySQL database to fetch the username and password (stored in md5 encryption) for comparison with user input. T ...

phphtmlmysql

Tips for dynamically changing the style (color/fill) of material-ui elements when generating them within a map function

I am struggling to dynamically change the style (colors) of elements in list items generated from a map function that includes rgb-color values. While using classes can work, trying to dynamically set the style based on the data/color provided in the objec ...

cssreact-nativematerial-ui

What is a simple way to export an HTML table to an Excel file in ASP.NET?

We need to create a report from the database and include an export button so users can download the report in an Excel-readable format. The priority is on simplicity of implementation, so using CSV is preferred over XLS if it's more straightforward. ...

htmlasp.netcsvxls

Interactive calendar using Php and Javascript/Ajax

Currently, I am working on a PHP calendar and have integrated Javascript/Ajax functionality to enable smooth scrolling between months without the need for page refresh. Interestingly, the calendar displayed as expected before implementing Javascript/Ajax, ...

javascriptphpajax

retrieve the data-initial-value's value through JavaScript

Hello, I am currently attempting to retrieve the text from this input field but all I'm getting is an empty value. <input type="text" class="quantumWizTextinputPaperinputInput exportInput" jsname="YPqjbf" autocomplete= ...

javascripthtml

Steps for Implementing a "Load More" Button on an HTML JSON Page

I'm currently engaged in a project that involves fetching product information from a JSON file and displaying it on an HTML page using JavaScript. While I've successfully implemented the fetch function, I now want to add a "Load More" function/bu ...

javascripthtmlcssjson

What could be causing the issue with the width: 100% not rendering correctly in this

I'm currently working on my footer, but I'm having trouble getting the width: 100% tag to work correctly. Here's a screenshot of what I mean: http://gyazo.com/9c23897cd7b9a74ca55ee9fb977f810c This is my CSS code: /*..Portfolio - Lars Beut ...

htmlcss