"Exciting Animated Features Unveiled in Chrome Version

A while ago, I utilized a code snippet from a source to create an endlessly scrolling element. You can find the original snippet here.

Here is the current CSS code that is active on my website:

.wave_bg {
  background: url("../img/wave_bg.jpg") no-repeat;
  -webkit-animation: slide 10s linear infinite;
  -moz-animation: slide 10s linear infinite;
  -ms-animation: slide 10s linear infinite;
  animation: slide 10s linear infinite;
}

@-webkit-keyframes slide {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 100% 0;
    }
}
@-moz-keyframes slide {
    from {
      background: left;
    }
    to {
      background: right;
    }
}
@-ms-keyframes slide {
    from {
      background: left;
    }
    to {
      background: right;
    }
}
@keyframes slide {
    from {
      background: left;
    }
    to {
      background: right;
    }
}

Recently, I encountered an issue in Chrome 34 where the background image stopped appearing when using this code (it worked fine in Chrome 33 and earlier versions). Disabling the animation revealed the background image again, leading me to suspect that the problem lies with the CSS animation.

I haven't been able to locate any documentation regarding changes in Chrome 34 related to animations. Have you experienced this bug before and found a workaround for it?

Answer №1

While I haven't reviewed your specific code, it is important to note that with Chrome phasing out many prefixes, some of your animations may cease to function correctly if you are solely relying on -webkit prefixes in your -webkit-animation: infinite....

It is crucial to incorporate both prefixed and unprefixed syntax within your declared animations. For example:

You should include the following:

@-webkit-keyframes infnite {
    0%   { -webkit-transform: scale(1); transform: scale(1);}
    100% { -webkit-transform: scale(2); transform: scale(1);}
}

as well as this:

@keyframes infnite {
    0%   { -webkit-transform: scale(1); transform: scale(1);}
    100% { -webkit-transform: scale(2); transform: scale(1);}
}

In the provided example scenario, if Chrome eliminates support for the transform prefix but retains support for keyframes, your animation would suddenly stop working without both the prefix and unprefixed versions.

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

Is there a way to efficiently install web assets such as bootstrap, jquery, and font-awesome without relying on a content delivery network

Is there a way to automatically install jquery, bootstrap, and font-awesome without going through npm and manually moving the files to the correct folders? Are there any programs that can update these libraries and place them in the appropriate directories ...

What sets apart the JavaScript console from simply right-clicking the browser and opting for the inspect option?

As I work on developing an angular application, one of my tasks involves viewing the scope in the console. To do this, I usually enter the code angular.element($0).scope(). This method works perfectly fine when I access the console by right-clicking on th ...

Increase the gap between two bootstrap columns on smaller screens when viewed in col-xs-12

Is there a way to address the issue where the two columns in property of col-xs-12 are displayed without any gap when the browser is resized to a mobile-sized screen? Any guidance on how to fix this would be greatly appreciated. View in large size View in ...

Is it possible to integrate ngx Pagination with Bootstrap?

Is it possible to integrate Bootstrap's pagination with ngx Pagination? I'm interested in using the functionality of ngx Pagination but styling it with the CSS from Bootstrap. ...

The event binding for input with the specific class `.SomeClass` in the document is functional in Chrome, but encounters issues in Internet Explorer

I am facing an issue where I have a span with the contenteditable attribute and a function to detect input within it. //TextArea <span class="SomeClass" contenteditable></span> //Function $(document).on("input", ".SomeClass", function () { ...

How can I utilize CSS shapes to create clickable images?

I'm facing a challenge in making an input field and button functional even when they are positioned behind a uniquely shaped PNG image. https://i.stack.imgur.com/eOg0N.jpg Initially, I believed that by applying a shape to the image, it would automat ...

Attempting to determine the smallest and largest dimensions of two values using CSS3

Trying to make sure the image on my phone adjusts its size based on orientation, I attempted using Ionic4. When in landscape mode, I want it to adapt according to height instead of width. Essentially, I need it to use the minimum size and also require the ...

When there are numerous websocket connections in Google Chrome, Socket.io can encounter issues and break down

I am encountering an issue where I create 60 client connections to a socket.io server using Google Chrome browser. The server sends screenshots to the clients at specific times, but some of the websocket connections, which are subprotocols of socket.io, ge ...

Change the shadow of the text to the rear side

I'm attempting to give some text a 3D effect by applying a shadow, but I am struggling to position the shadow behind the text. No matter how I adjust it, the shadow ends up either on top or completely distorted. Here is a link to a JS Fiddle with my c ...

Ways to ensure a video completely fills the frame

I am experiencing an issue where the video in the main div of my home page does not fully fill the div right away - I have to refresh the page for this to happen. As a result, there is black space on the left and right sides. Interestingly enough, this pr ...

What are the benefits of incorporating CSS into a CSS block rather than utilizing inline output with HtmlHelper in CakePHP?

Just a few days ago, I embarked on the journey of learning CakePHP through their blog tutorial. Now, I am diving into writing my own small project to gain hands-on experience with the framework. After going through their documentation, I discovered two ...

Display text with a hover effect

When I hover over an image, I want to display some text. I managed to make it work, but the text was expanding the size of the card. To solve this issue, I added a display none to the text class. I can't include all the code here, so here's a sn ...

What is the method for enclosing the Font Awesome addition symbol within a bordered box to create the appearance of a button?

Here is a sample HTML code: <div id="menu-icon"> <div><i class="fa fa-plus fa-lg"></i></div> </div> And this is the corresponding CSS: #menu-icon { height: 45px; width: 45px; background-color: #A3D8D4; ...

Showing computation result on a separate column in an HTML table

I am trying to set up a table with 3 columns. One column, total_column_price, is intended to display the calculation result of amount and device_price. How can I achieve this? The Table {{ Form::open(['action' => 'TransactionsINCont ...

Varying XPaths in Chrome depending on the machine

Currently, I am utilizing python in combination with selenium for automation tasks specifically on Windows operating system. Initially, I used the inspect element feature to locate an element and perform certain actions on it, which resulted in the desire ...

Turn off automatic scrolling on Safari iOS 16 and 15 with single tab functionality enabled

Hey there! I'm encountering a frustrating issue that's really boggling my mind. When using iOS 15 or 16 with Safari and the "Single tab" setting enabled (which places the Safari search bar at the top), I noticed a strange padding animation when ...

Arranging divs - positioning them sequentially

Visualize a math problem presented on a website. I want to showcase the math problem and allow users to input their answer beside it. I am working on setting up the structure for this feature. I have unique buttons that will modify the text of the answer. ...

Is it possible to apply two ngClass directives to a single div element in Angular 4?

When I click to start editing, a component is called for the editing process. In this component, I am unable to click on anything and the background turns black, which is okay. However, I would like for each ID that I select to edit to become active with a ...

Possible conflict between CSS and JavaScript on Magento website

Problem Description: Visit this link for more details I am facing an issue with the product upload process when using certain attributes. It appears to be related to a positioning problem. Despite trying various solutions, such as removing the position at ...

CSS3 Background Repeat on a Single Side

I am new to CSS3 and looking to create a background that repeats endlessly on one side of the screen, like the polka dot background menu seen on the right hand side of the Google Analytics website. Could someone explain how this effect is achieved? ...