Flickering Page Load Issue in iOS App Built with PhoneGap

My PhoneGap application utilizes slide in and slide out animations that are created entirely with CSS animations.

You can check out the project that inspired my app here.

In the demo, you'll notice that the slide transitions are smooth. However, when I add images to the pages, there is a slight flicker or blink after the new page loads. Interestingly, all UI elements appear on screen before the flickering occurs. Furthermore, sometimes scrolling on the page becomes glitchy and doesn't allow me to scroll to the bottom where my images are located.

I attempted caching the images using CSS to improve loading, but it didn't solve the issue. I also read about a similar problem on JQ Mobile blogs and tried adding the following CSS without success:

    webkit-backface-visibility: hidden;

Your assistance would be greatly appreciated as I've spent my entire Saturday trying to resolve this problem.

Answer №1

It took me a while to figure it out, but I eventually discovered that the problem was caused by the scrolling feature and fixed header being poorly supported in the -webkit browser. Switching to iscroll 5 resolved the issue completely.

Answer №2

The reason for this issue is the excessive number of JS files being loaded on the HTML page. Loading multiple JS files can slow down the application, causing flickering in a PhoneGap application. When developing an application in PhoneGap, it is recommended to use a single-page architecture to avoid this problem. I have personally experienced this issue as well.

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

Unable to apply text decoration to a floating element

Why is text-decoration not applying to a span inside a div after floating the span, and how can this be fixed? To see the issue in action, visit: http://jsfiddle.net/wtBDX/2/ div { color: red; text-decoration: line-through; } div span { float: rig ...

Tips for connecting a Django API project with a nodejs and react frontend

I'm currently working on a Django API project and I am considering incorporating Node.js into the mix. Additionally, I am interested in using React for the frontend of the application. Is this combination of technologies feasible? Would it be advisabl ...

Understanding the concept of for loops in JavaScript and incorporating them in CSS styling

Hello there! I initially used this code to draw 12 lines, but now I am looking to incorporate a for loop and implement it in CSS. Can someone please guide me on how to proceed? <!DOCTYPE html> <html> <head> <style> #straigh ...

iOS Tile-based View Navigation Controller

Currently, I am developing an iOS app that requires a "Tile Based" user interface reminiscent of Windows-8. Upon opening the app, a "Home Screen" featuring six tiles of different shapes and sizes is displayed. Some of the tiles are square, while others ar ...

Adding multiple new properties to an object in AngularJS through iteration

I am looking to merge two arrays together. Here, I have a piece of code where I want to extract each user row from the foo array and create a new array. UserService.GetUserFoo(id) .success(function (data) { data = angular.fromJs ...

Transmitting JSON information using post method through .ajax(), as well as receiving a JSON reply

Seeking assistance with debugging a registration page I am currently coding. I have hit a roadblock for the past 48 hours and would greatly appreciate any help in resolving the issues. CHALLENGE I am utilizing JavaScript to validate form inputs for error ...

Making poll everywhere items align horizontally using HTML: a step-by-step guide

Is there a way to display two different Poll Everywhere polls side by side on a Blackboard course, rather than having them stacked on top of each other? I have the embed codes for both polls ready to go. ...

Is it possible to maintain the width of an element even when its height is set to 0px?

Let me provide a detailed explanation of my issue below, but the question remains the same: Is there a way to make an element hidden or invisible with a height of 0px or slightly more than 0px while maintaining its width for functionality in Safari? Here ...

Choosing Between PureFor and ES6 Map: A Comparison

I prefer writing Pure For(nested Fors) in JavaScript instead of using map because I have found it to be more efficient in terms of performance. Is this True or am I making a mistake repeatedly? If For is quicker, but Map is cleaner, which one should I cho ...

Building Nested Divs with JavaScript

I've encountered an issue with this code snippet. While it works perfectly fine in jsfiddle, I faced a problem when testing it on my local file. Only the first three lines created by html are displayed: test h1 test h2 test p (I tested the code ...

The requirement in Angular 9 is to provide a NgModule or NgModuleFactory for the bootstrapping process

After upgrading my Angular application from version 6 to version 9, I encountered a strange error when deploying it to my staging server: An error occurred: You must pass in a NgModule or NgModuleFactory to be bootstrapped Despite researching extensive ...

What is the best way to conceal an HTML element on a particular page that is already styled as (visibility: visible), but only if its child has a specific class assigned to it?

I have a grid of content and posts displayed on multiple webpages. Users can select specific items from the grid to navigate to more detailed information on another page. Each webpage has its own grid which I want to filter based on a specific class. The ...

Is your Chakra UI canvas in React displaying blank with zero width and height?

Here is the link to the codesandbox And here is the code snippet: import "./styles.css"; import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react"; import { SketchField, Tools } from "react-sketc ...

Font size determined by both the width and height of the viewport

I'll be brief and direct, so hear me out: When using VW, the font-size changes based on the viewport width. With VH, the font-size adjusts according to the viewport height. Now, I have a question: Is there a way to scale my font-size based on ...

Tips for extracting CSS data with Selenium webdriver's executescript function

Just starting to learn Javascript in a Node environment... I'm trying to use the code snippet below to extract CSS values for a specific web element, but I'm having trouble parsing it in JavaScript. driver.executeScript(script, ele).then(p ...

Having difficulty updating the state within a function

While working on developing a server-side pagination that mimics a static version, I have almost completed it. However, I have run into some issues that I am struggling to resolve. Here's how my code currently looks: const LiveIndex = (props) => { ...

When is the __v value in Mongoose updated?

As per the information found at , the __v version field is expected to change when array elements are shifted from their original position. I conducted a test using the following code (Mongoose version 3.8.15): var mongoose = require('mongoose' ...

Loading content dynamically into a div from an external or internal source can greatly enhance user experience on a website. By

As I work on my website, I am incorporating a div structure as shown below: <div class="container"> <div class="one-third column"> <a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a> </div> & ...

Unexpected behavior of ion-select: No rendering of selected value when applied to filtered data

I came across an unexpected issue with the dynamic data filtering feature of ion-select. In my application, users are required to choose three unique security questions during registration. I have an array of available questions: questions: Array<{isSe ...

Tips for adding event listeners to dynamically-loaded content using AJAX

I need help with the following code snippet: $("#contantainer").load("some_page.txt"); Inside some_page.txt, I have the following content: <div class="nav"> <ul id="nav_ul"> <li><a class="nav_a" href="#home" id="home"> ...