The flickering problem with HTML5 DOM

I created a HTML5 game using canvas and DOM elements, but I'm facing an issue with flickering DOM elements while playing. The problem seems to be more prevalent in mobile browsers, particularly Chrome.

My game includes a full screen canvas with various objects rendered on it, as well as DOM elements for the GUI (such as pop-ups). The DOM elements are positioned absolutely and scaled using CSS3 on window resize (transform:scale).

Unfortunately, I cannot share the code as it's part of a commercial project, but I have attached some screenshots below:

Screenshot 1
Screenshot 2
Screenshot 3

If anyone has insights on why this flickering is happening and how to solve it, I would greatly appreciate your help.

Thank you!

Answer №1

It appears that you haven't uploaded any screenshots, which could be causing the issue of redrawing without a buffer. I recommend looking into double buffering as a solution. In my experience with coding flash and java games in the past, buffers have helped eliminate flickering.

For more information, you may find this previous question helpful: Does HTML5/Canvas Support Double Buffering?

Upon reviewing the screenshots, it seems like the problem might not be related to double buffering, but rather CSS issues. Double check your CSS code for properties like background-attachment: fixed or position: fixed, as these can sometimes cause flickering in Chrome.

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

Issue with triggering blur event in Internet Explorer while using Angular 2+

The issue discussed in the Blur not working - Angular 2 thread is relevant here. I have a custom select shared component and I am attempting to implement a blur event to close it when the component loses focus. // HTML <div (blur)="closeDropDown()" t ...

The JQuery script is not producing any results

After integrating a script into my website template, it is not functioning as expected. I suspect there may be a conflict with JavaScript, but upon inspecting with firebug, I am unable to identify any abnormalities. Here is the link for reference: Link ...

A guide on incorporating multiple nested loops within a single table using Vue.js

Is it possible to loop through a multi-nested object collection while still displaying it in the same table? <table v-for="d in transaction.documents"> <tbody> <tr> <th>Document ID:</th> &l ...

Is there a way to exclude a specific div based on two select choices?

Check out my Fiddle demonstration here $('select#classes').on('change', function() { var selectedClass = $(this).val(); $('.col-sm-6:not(:contains(' + selectedClass + '))').hide(); $('select#subjec ...

What is the best way to extract a table from a website that has stored the table data separately from the HTML?

Attempting to extract table data from the following URL: In a previous scraping attempt, the Python packages utilized were: from bs4 import BeautifulSoup import requests import mysql.connector import pandas as pd from sqlalchemy import create_engine Howe ...

Looking for the top jQuery plugin for creating rounded corners on both divs and tables?

After experimenting with five different plugins, each with its own limitations, I'm still struggling to find one that meets my requirements. Specifically, I need a plugin that can round the corners of a div with a specified height, even if it has no c ...

How can I show a legend entry for every column in Amcharts?

Take a look at this code snippet: http://jsfiddle.net/ouLed1fp/ How can I create a legend entry for each column in the chart? Also, is there a way to display the column names next to them, providing a clear legend? <div id="chartdiv" style="width: 10 ...

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Having a data-filled table, I am looking to implement smooth transitions when adding or deleting an item. This is a ReactJS project utilizing Material-UI. The desired effect is similar to the one demonstrated in their example. While they use a List compon ...

Creating a complete webpage using HTML

Is there a method to load an HTML file and execute the embedded javascript to create a complete HTML page programmatically similar to how browsers do? Edit 1 - I am working on an application where I need to extract data from an HTML page on a remote websi ...

How to use TypeScript to set a value in ng2-ckeditor

I have implemented two ckeditor instances using *ngFor: <div class="form-group" *ngFor="let lang of languages"> <span>Legal text in {{lang.translate}} {{lang.abbr}}</span> <ckeditor id="{{lang.abbr}}" formControlName="{{lang.abbr} ...

How can I send two responses in a single POST request using node.js?

Below is my router setup for handling responses: questionRouter.post('/questionsReply', (req, res) => { twilioResp(req, res); var newResponse = new Response(req.body); newResponse.save((err, data) => { if (err) return handleDBError(er ...

Next.js is experiencing issues with the build process

I encountered an issue while working on a Next.js project with NextAuth.js. The problem arises when I try to define my authOptions, as a TypeScript error indicates that the object is not compatible with the expected type for AuthOptions. Here's the sn ...

Aligning SVG clipping path using CSS

This problem has me stumped! I need to center the SVG clip within the surrounding div, just like in this example: http://jsfiddle.net/ztfdv9qh/ - Make sure to check the link because the SVG is quite long! <div class="svg-wrapper"> <div class ...

Utilizing AJAX to showcase individual PHP files

My PHP elements are not being displayed in the code, and I need to figure out why. Below is the HTML code I am currently using: <div class="tablocation"> <ul class="css-tabs"> <li><a class="current" href="/wp-content/themes ...

Advantages of passing individual variables instead of the entire object from HTML to JavaScript in AngularJS

When it comes to passing the iterating object from HTML to Javascript, there are two approaches that can be taken. The first approach involves passing the iterating object as a whole, while the second approach only passes the required properties of the obj ...

Retrieving information from a TableRow element within Material UI

In the latest version of Material UI, I am utilizing a Table component but struggling to figure out how to fetch data from a selected row. The Table component's documentation mentions an onRowSelection prop that provides only the RowNumber of the sel ...

Instead of displaying an error page, an Axios post request is returning data

I'm currently dealing with a post request that looks like this: axios({ method: "post", url: "/sessions/add", data: { session: { name: session.session.name, date: sessionDateInput.value, ...

The full execution of Jquery show() does not pause until it finishes

Here is the sequence I want to achieve: Show a div element with the CSS class yellow Execute a function for about 5 seconds Remove the yellow class and add the green CSS class "state Ok" However, when running my code, the div container does not appear u ...

Implementing automatic line breaks in Bootstrap

When setting the "overflow scroll able" option, I want it to only allow scrolling in the y direction and if x content overflows, a line break should occur. I tried applying 'white-space', but it didn't work as expected. <ul class="s ...

Struggling with linking my Angular Controller with my View and experiencing difficulty establishing a connection

I'm encountering an issue while attempting to link a controller to my view. The error I keep receiving is as follows: Error: ng:areq Bad Argument Argument 'TestAppCtrl' isn't a function, received undefined Here's the content ...