Flickering Button Displayed After Fade-In Animation

After scouring the internet for a solution, I still can't seem to figure out why my code isn't working. Whenever an element fades in on Safari, it quickly flickers or flashes white, almost like a rapid refresh is happening.

I've tried various suggestions such as using

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-webkit-perspective: 1000;

but none of them have resolved the issue. I'm using the Divi Theme on Wordpress and I'm starting to think that maybe I'm not placing the code in the right spot. Can anyone provide some guidance on how to fix this frustrating problem?

Any help would be greatly appreciated!

csswordpresssafariwebkit

Answer №1

If you want to adjust the appearance of the button, consider changing the opacity rather than its visibility using the following code snippet:

button{
width:300px;
height:100px;
animation: 2s linear;
animation-name:bring-in;
}
@keyframes bring-in{
0%{opacity:0;}
100%{opacity:1;}
}
<button><h2>I am groot</h2></button>

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

Expanding a grid cell beyond 100% can be achieved using a 1

I am working with a grid layout that I want to span exactly the height of the screen - no more, no less. The grid includes a fixed header (one), a fixed footer (three), and scrollable content (two). .grid-container { display: grid; grid-template-a ...

htmlcsscss-grid

GUIDE: How to wrap individual elements of a WordPress menu with a unique ID that matches the item title

I am looking to dynamically display an image based on the menu item clicked or hovered over. It would be useful to have a unique id for each menu item to easily manipulate them with JQuery. Is there a way to assign an id corresponding to the title of eac ...

jquerywordpressmenu

Tips for displaying sorting order when the column width is narrower than the caption in free jqgrid

Sorting columns in jqgrid can be done by clicking on the column header, with the ability to set a default sort order upon loading. Icons for sorting are specified using: $grid.jqGrid({ viewsortcols: [false,'vertical',true], The sort icon an ...

jquerycsssortingjqgridfree-jqgrid

The language selection feature is not appearing on the Safari Version 14.1.2 browser

Within the application I am developing, the language picker appears correctly in every browser. At the top of the screen, users have the option to select their preferred language for the app. However, when tested on Safari, the language picker does not ap ...

reactjssafarimaterial-uistyled-components

Execute a script when a post is loaded on a WordPress page

I am looking to have my jQuery script execute every time a post page is opened or loaded. I tried using echo in the script but it did not work. Where should I place the script to ensure it runs? single.php <script src="https://ajax.googleapis.com/aja ...

javascriptphpjqueryajaxwordpress

Setting character limits within textareas based on CSS classes in a dynamic manner

I'm looking to develop a JavaScript function that can set text limits for multiple textareas at once using a class, allowing for flexibility in case specific textareas need to be exempt. However, I'm facing issues with my debuggers - Visual Studi ...

javascriptjquerycssdebugging

Is there a way to completely remove all styling from a specific child element?

Struggling with a drop-down menu issue - the parent element has a border, but I don't want that style to be inherited by the child sub-menu. Despite my attempts to remove the border using border: 0px, it's not working as expected. Is there any wa ...

htmlcssinheritanceparent-child

Aligning an image within the layout of a Ghost theme

I'm currently using Ghost's free Starter theme and I'm attempting to center an image that is wider than the paragraph and main element (60rem). These are the key CSS elements that control the positioning of the image. I can achieve full wid ...

htmlcssimageghost-blogghost

Maximizing the number of divs arranged horizontally in HTML while utilizing the full line width

My website consists of several fixed-width div elements that are styled to flow inline using the display type inline-block. This layout creates empty space at the end of the line where subsequent div elements cannot be accommodated and have to wrap to the ...

htmlcss

Ways to modify the gap between buttons using CSS

I am faced with a design challenge on my home page. I want to add some spacing between the buttons so they are not too close to each other, but for some reason margin-top and margin-bottom properties are not working as expected. Can you help me figure out ...

htmlcss

Incorporate a personalized Metabox into the WooCommerce admin orders interface while using HPOS functionality

Currently, I am attempting to incorporate a new meta box onto the woocommerce order page within the dashboard. add_action( 'add_meta_boxes', 'add_meta_box_wrapper' ); function add_meta_box_wrapper() { add_meta_box( 'custom_meta ...

phpwordpresswoocommerceordersmeta-boxes

Modifying Font Style in Angular 4 Material

Is there a way to change the font in Angular 4 Material material.angular.io using the styles file in .CSS format instead of SASS? While the documentation offers an example for SASS at: https://github.com/angular/material2/blob/master/guides/typography.md ...

cssangularmaterial-design

Having issues with nth-child? It seems like nth-of-type isn't working either

I am trying to change the color of all even titles from h2 to orange using nth-child. However, I seem to have made a mistake somewhere and can't figure out what it is... *{ font-size: 1em; } h2{ font-size: 1.5em } ...

csscss-selectors

Adjusting the page width to ensure compatibility with all devices

I am facing difficulties with CSS regarding the properties width and margin. I am developing a webpage that should display properly on all devices, including PCs, smartphones, and tablets. I am using HTML <meta name="viewport" content="width=device-widt ...

htmlcssmarginpixel

Empty gap separating two side by side photos

Could someone assist me with removing the excessive white space between these two images? Each image is contained within its own respective div, with layer effects applied when hovered over. I've attempted changing the display to inline-block and sett ...

htmlcss

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create a ...

cssreactjscss-selectorsmouse-cursorcustom-cursor

Is it possible to make the entire div clickable for WordPress posts, instead of just the title?

I am currently facing an issue where only the h1 element is linked to the post, but I want the entire post-info div to be clickable. Despite my efforts, I haven't been able to make the whole div clickable, only the h1 element remains so. Below is the ...

javascriptjquerywordpress

Guidelines for choosing a dropdown menu option using jQuery in a WordPress photo gallery

First off, take a look at the screenshot to understand what I'm trying to accomplish: Within WordPress, after clicking on "New Post" and then on the "Add Media" button, a pop-up image gallery appears with an image filtering drop-down menu. My goal is ...

javascriptjqueryhtmlwordpress

What is the CSS syntax for styling children that are not immediate descendants?

My query is about whether it's appropriate to reference a child of an element that is not a direct child. Imagine having this HTML structure: <form class="formation"> <p> <span> <input class="phone input"> ...

htmlcsswordpress

What are some ways to customize the appearance of React Semantic components?

Is there a way to apply CSS for react semantic UI when using create react app? I have installed semantic-ui-react and included the CSS CDN: loginForm.js: import React from "react"; import { Button, Form, Header } from "semantic-ui-react"; import styles f ...

javascriptcssreactjs