Issue with CSS keyframes not functioning properly on Cordova Android version below 4.4

@-webkit-keyframes headerFade
  0%
    opacity: 0
  50%
    opacity: 1
  99%
    opacity: 0
@keyframes headerFade
  0%
    opacity: 0
  50%
    opacity: 1
  99%
    opacity: 0

.header
  width: 100px
  height: 100px
  background: #ccc
  position: relative

.header.ani:before
  content: ' '
  width: 100%
  height: 100%
  position: absolute
  top: 0
  left: 0
  background-color: #000000
  -webkit-transform: translate3d(0,0,0)
  -webkit-backface-visibility: hidden
  -webkit-animation: headerFade 1s linear infinite
  -webkit-animation-fill-mode: forwards
  animation: headerFade 1s linear infinite

Explore the code on CodePen

Although it functions perfectly in Chrome, there seems to be a lack of animation (only showing 0 and 1) when using the cordova android app version below 4.4. I've encountered a similar issue with the transform property for background-image which only works on 4.4+ devices. According to Can I Use, these features are supported by Android browsers above 4.0. Could there be something I'm missing?

androidcsscordova

Answer №1

Older versions of Webkit faced challenges when it came to displaying animations on pseudo elements like :after and :before. The .image-arrow class in your scenario utilizes the content property, which is typically used exclusively for pseudo elements. I recommend replacing it with background-image instead, as shown below:

e.header.ani /*:before*/
  /*content: ' '*/
  width: 100%
  height: 100%
  position: absolute
  top: 0
  left: 0
  background-color: #000000
  -webkit-transform: translate3d(0,0,0)
  -webkit-backface-visibility: hidden
  -webkit-animation: headerFade 1s linear infinite
  -webkit-animation-fill-mode: forwards
  animation: headerFade 1s linear infinite

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

A flex container containing two divs each with a white-space:nowrap element set at 50% width

How can I create a parent div that contains two child divs, each with a width of 50% that adjusts based on content? The issue arises when one of the child divs has an h3 element with white-space:nowrap;, causing it to exceed the 50% width. I attempted to ...

htmlcssflexbox

Reviving static methods during Android runtime: A guide

I am currently in the process of implementing dynamic locale changes in my Android application. Whenever the user's locale changes, I save this information in SharedPreferences, and each Activity makes reference to the locale information upon creation ...

javaandroidstatic

Inflexible lists refusing to wrap

I have a straightforward requirement: I need a list <ul /> containing items <div />s of the same fixed size. These items should be displayed from left to right, filling up all available space before wrapping onto the next line. Below is the ba ...

htmlcssflexboxbootstrap-4

Learn how to create a stunning effect by combining two half images and revealing a full image upon hover with a smooth animation

I am struggling with implementing a specific feature using jQuery. I have designed a page hero with two sections (red and black): My goal is to have the black section expand over the red section when hovering, creating a full black box. I want the same ef ...

javascriptjqueryhtmlcss

Is it possible to change the background color of a Bootstrap button using CSS overrides?

Desired Outcome https://i.sstatic.net/EjEXG.gif Actual Result https://i.sstatic.net/BmXYG.gif The goal is to toggle the red-background class, so that when hovering over the button-bullet, its background-color changes to #FCC1C5. Avoiding the use of .b ...

jquerycsstwitter-bootstrap

The ImageView vanishes after the LayoutParams are altered

I successfully added an ImageView to my LinearLayout programmatically within the onCreate method and it functioned as expected. img = new ImageView(this); img.setImageResource(R.drawable.source); LinearLayout.LayoutParams params = new LinearLa ...

javaandroidimageviewcoordinatestouch-event

Tips for presenting information on HTML webpages with the help of JavaScript

I am facing an issue with displaying data in HTML using JavaScript. The problem is that my code only shows the most recent data instead of all the data. My development platform is phonegap. Below is the snippet of code that I am having trouble with: var ...

javascripthtmlcordovainnerhtml

Generating custom-styled entries using Word VBA

I have set up styles in my Word document, such as My_Style (which I use for titles). I am looking to create entries for illustrations that correspond to the number from that particular style. Here is the code snippet I am using: Sub Macro4() ' &apos ...

cssvbams-word

Is there a way to customize the slicing of *ngFor in a component according to the components it is being injected into?

This code snippet represents a component that needs to be included in other components: <div class="row"> <div class="col-12 [...]" *ngFor="let course of courses"> <div class="card"> ...

javascripthtmlcssangulartypescript

The empty string is not getting recognized as part of an array

Currently, I have a textarea field where pressing enter submits and creates a new item in the array. Pressing shift + enter creates a new line in the textarea input field. But when trying to submit by pressing shift and enter after creating a new line, it ...

javascripthtmlcssreactjs

Switching the background color of alternating divs in reverse order: a step-by-step guide

I am looking to alternate the background color of divs between odd and even, with the last div being grey and the second to last div being green. I have tried using the odd/even classes in CSS, but it did not work as expected. .main{ width:500px; height ...

javascripthtmlcss

Align text vertically above and below an input field labeled using tailwindcss

I am striving to achieve the desired outcome but with the text in front of the input vertically aligned with the text after the input. https://i.sstatic.net/0WTfk.png Here is what I have created so far to accomplish that: <div class="space-x-2 fl ...

csstailwind-css

Enhancing Dropdown Functionality Using Jquery

Hey there, I am looking to create a dropdown list/menu similar to the one shown in this image: (a screenshot). Could you please guide me on how to achieve this? Can it be done using JQUERY? Thank you in advance, Andrea ...

jquerycssinterfacemenudrop-down-menu

Issues with Phonegap ajax form functionality

I have the following code snippet in my index.html file: <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> ...

javascripthtmlajaxcordova

How can I align Ion-Content to the bottom of the page in Ionic?

I'm having trouble positioning a message input box at the bottom of my page. I've experimented with using align-self-end and creating a css class for ion-footer, but nothing seems to be working. <ion-content> <ion-footer align-self-end&g ...

cssangularjsionic-frameworkionic4

What is the best way to position an <a> tag in the top right corner of a card using Bootstrap?

I own a card that features an image in the background. <div class="col-12 col-sm-8 col-md-6 col-lg-4 mt-4"> <div class="card"> <img class="card-img" style=" filter: brightness(75%);" src=& ...

htmlcssbootstrap-4

Is it possible to utilize CSS for styling page.aspx controls?

Is it possible to apply CSS styles to the controls on page.aspx? Can CSS be used for everything on the page? ...

.netcss

The size of the generated file from tailwind build is compact

I've been working with TailwindCSS and have followed the installation process outlined below. However, after completing the steps, I ended up with a tailwind.css file that only contains 369 lines. This seems to be fewer lines than what others have in ...

cssreactjsnpmtailwind-csscra

The one-click button is functional on larger screens, while on mobile devices, only a double click will register

I am facing an issue in angular where a button works perfectly fine with one click on larger screens, such as Macbook. However, on iPhone, it requires a double click to function properly (it works fine on Android too). The alert triggers with a single cl ...

javascriptcssbuttononclickdouble-click

Is it necessary to add a line break after a span element generated by react, next, or bootstrap

There is a strange issue plaguing my code - I'm enclosing some text in a span tag and it's causing an unexpected line break. It's unclear whether React.js, Next.js, or Bootstrap is the culprit, but I can't seem to get rid of the pesky l ...

cssreactjsbootstrap-4next.js