What could be causing flickering when animating CSS translate on a black background in WebKit?

Upon viewing the jsfiddle, it's evident that this animation experiences flickering in webkit browsers. Regardless of whether the animation is set to repeat infinitely or not, the issue persists. How can this problem be resolved? I've spent hours attempting various solutions without success. None of the usual techniques seem to apply to this particular scenario. Appreciate any insights you may have.

The following is the code snippet:

body {
    background-color: #000;
}

#box {
    width: 200px;
    height: 200px;
    top:20px;
    left:20px;
    position:absolute;
    border: 1px solid red;
    -webkit-animation: box 20s linear infinite normal;
}

@-webkit-keyframes box {
    0% {-webkit-transform: translate(0,100px);}
    50% {-webkit-transform: translate(100px,0);}
    100% {-webkit-transform: translate(0,100px);}
}

UPDATE: Following advice from RCorrie, adjusting my monitor's color settings managed to resolve the issue!

Answer №1

The reason behind this occurrence is due to the element being displayed with a half-pixel offset. Instead of having a single pixel with 100% opacity, it is spread across two pixels at 50% opacity each. This rapid switching between 100% and dual 50% causes the flickering effect.

To resolve this issue, you can either increase the thickness of the line or accelerate your animation speed (the former option is more effective in resolving the problem).

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

Combining two images using HTML and CSS resulted in conflicts when attempting to overlay any additional elements

I have managed to overlay two images successfully, but I am experiencing conflicts when trying to do the same with other div images. Here is the code on jsfiddle: https://jsfiddle.net/cLew1t2v/ and here is the code snippet: <div> <div style ...

Using CSS animations to animate a div while creating a subtle pause between the two

I am working on creating a notification bar that will be displayed and hidden using CSS animation. My challenge is finding the right delay between the two animations. HTML <div id="notification" class="alert" role="alert"></div> JS $(' ...

Change the location of an HTML element within the page structure

Let's consider having 3 elements like this: <h1>Hello</h1> <p>hello</p> <h1>Hello</h1> I am looking to remove the second <h1> as I only want it to appear once on the page. However, I would like to have flexib ...

What could be causing the CSS border to not show up on the webpage?

I am trying to add a border to the footer, but it seems like something is blocking it from showing properly. Below are the CSS lines I have used: position: fixed; bottom: 0; right: 0; left: 0; clear: both; line-height: 1.36em; padding: 08px 0px 0px; tex ...

Tips for eliminating unnecessary space in a text area

I have a textarea and a button. I wanted them to be placed in the same horizontal line from the bottom. However, when I place them inline with no style applied, there is extra margin at the bottom of the textarea that is causing them not to align properly: ...

Is it possible to create a similar design that is also responsive?

I've been struggling to create a header for a website project I'm working on. My goal is to design something like the image below: https://i.sstatic.net/szQGf.jpg The biggest challenge I'm facing is making this design responsive. The point ...

Running yarn build in react results in CSS modifications

When working in my local development environment, I have everything functioning as intended. However, after executing yarn build, all of my styles appear drastically different. The project was set up using create-react-app and styled with regular CSS. Bel ...

Tips for maintaining a seamless look with image wrapping on a single line

I'm having an issue with my code – the image is appearing below the input box instead of beside it. Can anyone spot the mistake? <input type="text" name="test" /> <div style="float:left"><img src="test.jpg" /></div> ...

Is there a way to manipulate the placement of an image within a div using CSS?

Teaching myself HTML has been quite the journey. Right now, I'm in the process of building a website purely for its aesthetic appeal, and I seem to be hitting a roadblock with the CSS/div element. As of now, it appears like this. When the h1 is remove ...

What distinguishes the creation of HTML Emails from HTML Email Signatures?

In my opinion, I may be overthinking this but is there a distinction in how HTML Emails and HTML Email Signatures are constructed and displayed? It seems that when I search for HTML Email Signatures, results mainly focus on HTML Emails. Some results do tou ...

Ways to distort this shape using CSS?

I've been attempting to replicate this specific block layout, but I can't seem to get it right according to the design. Can anyone provide guidance on how to achieve it? Here is the desired block: https://i.stack.imgur.com/ud0HM.jpg Here's ...

`Can a creation of this nature be accomplished?`

In my text input field, users can type messages to send to me. I'd like to add buttons on the page with symbols like "!", "XD", and "#". When someone clicks on a button, such as the "!" button, that corresponding symbol should be inserted into the tex ...

Switching over from an external style sheet to inline elements can be tricky, especially when it comes to integrating "dropdown" styles properly

I successfully created a stylish menu using a specific style sheet, but now I'm facing issues when trying to incorporate this menu into web pages with different style requirements. Realizing that loading the style sheet onto these new pages wreaks hav ...

Quickly redesigning the appearance of file input using javascript and jquery. Seeking assistance to correct css issues on jsfiddle

Hey there, I've been working on styling the input[type="file"] element and could use some assistance. Like the saying goes, "One JSfiddle is worth 1000 words," so here's the link to my example: --- For more details, click here: http://jsfiddle.n ...

When anchor links (href) are incorporated within a flex layout and flex-direction is set to row, they may not function as

I've designed a website with three horizontal pages, each filling the entire screen. There's a fixed menu with links that scroll to specific pages when clicked. However, users can also scroll horizontally to navigate between screens. If two page ...

Left click not triggering mousedown event

$("#cell1").mousedown(function(event){ switch (event.which) { case 1: alert('Left Mouse button pressed.'); break; case 2: alert('Middle Mouse button pressed.'); break; case 3: aler ...

Troubleshooting problems in transferring JSON data between a React application and a Spring Boot service running locally

Running a local Springboot server, accessing it locally in the browser returns a properly formatted JSON object. However, encountering issues when trying to fetch this JSON object from a React application running on node locally. Managed to overcome CORs h ...

A step-by-step guide on creating an automatic image slider using the Swiper class in HTML

I am facing an issue with the swiper-container swiper-slider class, where the images are not sliding automatically. I need the image slider to work automatically without the need to click the next and prev buttons. Below is my code for reference. Instead o ...

Having trouble aligning photos in the grid

I am facing an issue aligning my menu and image grid. The grid is inline-block but the first item stays stuck in the upper right-hand corner no matter what I do, without affecting the navigation menu placement. Additionally, when testing locally, everythin ...

What is the best way to align an Icon in the navbar-toggler of Bootstrap 5?

When working with Angular and Bootstrap to develop a navigation bar, I encountered an issue with aligning a user icon in the navbar. The picture below shows the problem that arises when trying to center align the user icon among other links in the navbar. ...