Prevent title flickering in Android using Ionic

I am attempting to create a tab content page using the "standard" method recommended by the ionic template example.

However, I have noticed that when switching between tabs on Android, the view title flickers. This issue is not present on iOS or desktop browsers. However, if you switch to device mode in Chrome for Android devices, you will see the flickering.

Is there a solution to overcome this problem?

menu.html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-positive">
      <h1 class="title">Left</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/tab/content1">
          Tab 1 Content 1
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Tab.html

<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light">

  <ion-tab title="Content1" href="#/app/tab/content1">
    <ion-nav-view name="tab-Content"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Content2" href="#/app/tab/content2">
    <ion-nav-view name="tab-Content2"></ion-nav-view>
  </ion-tab>

</ion-tabs>

content1.html

<ion-view view-title="Bookmarks">
  <ion-content>
    <h1>Content 1</h1>
  </ion-content>
</ion-view>

content2.html

<ion-view view-title="Bookmarks">
  <ion-content>
    <h1>Content 2</h1>
  </ion-content>
</ion-view>
javascriptangularjscordovaionic-framework

Answer №1

I want to express my gratitude to @AndresRehn for providing the link (). The problem of flickering titles on android can easily be resolved by adding the following CSS code.

/*
    Use these CSS styles to get rid of the annoying flickering header while changing tabs in an Ionic app on Android:
    http://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281/2
*/
.platform-android .header-item.title {
    transition-duration: 0ms;
}
.platform-android .header-item.buttons {
    transition-duration: 0ms;
}

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

Using the Spread Operator to modify a property within an array results in an object being returned instead of

I am trying to modify the property of an object similar to this, which is a simplified version with only a few properties: state = { pivotComuns: [ { id: 1, enabled : true }, { id: 2, enabled : true ...

javascriptreactjsreduxreact-reduxspread-syntax

Unable to connect List to dropdown in angular

Having trouble connecting dropdown with a List in AngularJS: <select> <option ng-repeat="x in list">{{x}}</option> </select> app.controller('myCtrl', function($scope) { $Scope.list=[{id:1, name='name 1' ...

javascriptjqueryhtmlangularjs

React component encountering unexpected prop value

In my project, I have a Modal component and a Form component. The Modal is a functional component, while the Form is a class component responsible for handling form submissions. The Modal component passes all of its props to the Form component. Within Mod ...

javascriptreactjsreact-props

An unusual occurrence with the setTimeOut function within a for loop was observed

When attempting to log numbers at specific intervals on the console, I encountered an unexpected issue. Instead of logging each number after a set interval, all numbers are logged out simultaneously. I've experimented with two different approaches to ...

javascript

What is the best way to assign a value to a class variable within a method by referencing the 'this' keyword?

Is there a way to set the state of this Ionic react app when displaying the outcome of a reset service? I am facing challenges with using this.setState({resetSuccess}) within a method due to scope issues. (Details provided in comments) Here is the relevan ...

javascripttypescriptionic-frameworkionic-react

The most efficient method for documenting $.trigger in JavaScript/jQuery is through the use of JSD

When it comes to documenting in jsDuck, what is the optimal method for capturing the following event trigger: $(document).trigger('myCustomEvent'); ...

javascriptjqueryjsduck

Adjust the form action and text input name according to the selected radio input

Seeking assistance with the following code, can someone help? $(document).ready(function() { $('#searchform').submit(function() { var action = ''; if($('.action_url').val() == 'l_catalog') { ...

phpjavascriptjquery

Manipulating Data in AG-GRID with AngularJS: A Guide to External Editing

Currently, I'm in the process of developing a single-page application that utilizes AngularJS, UI-Router, and AG-GRID. However, I've encountered an issue with updating AG-GRID's data from an external form. Here is a breakdown of the problem ...

javascriptangularjsag-grid

Producing asynchronous JavaScript events using a browser extension (NPAPI)

Currently in the process of developing a web browser plugin using NPAPI. The issue I am facing is that my plugin requires a worker thread to handle certain tasks, and I need to pass events back to JavaScript as the worker progresses. However, due to the N ...

javascriptbrowserpluginsnpapi

No matter how hard I try, the async function within the React Component keeps returning 'Promise {<pending>}' consistently

Currently, I'm facing an issue where running an asynchronous function inside a functional component in React (NextJS) results in the function returning a pending promise: Promise {<pending>}. Oddly enough, fetching data from a dummy API works pe ...

javascriptreactjsapinext.jsspotify

Creating a unique Vue.js modal window for every individual product

Currently, I am in the process of creating a small online store using Vue.js. Within this store, I have a variety of products each with unique names and prices. In order to provide more information about each product, I have included a "Details" button. M ...

javascriptvue.jsbootstrap-5modal-windowvuejs-slots

Implementing Entity addition to a Data Source post initialization in TypeORM

The original entity is defined as shown below: import { Entity, PrimaryGeneratedColumn} from "typeorm" @Entity() export class Product { @PrimaryGeneratedColumn() id: number The DataSource is initialized with the following code: import ...

javascripttypescripttypeorm

The requested :id route could not be found using the findById() method in

Having trouble retrieving data using Insomnia from a specific ID in my collection. Below is the sample request URL. http://localhost:5000/todos/5dd295a49d5d7a0b7a399bbe However, when I access http://localhost:5000/todos/ without the ID, I can see all the ...

javascriptnode.jsmongodbexpressroutes

Creating a nested list of objects in JavaScript can be achieved by using arrays within objects

I'm currently in the process of creating a new Product instance in Javascript, with the intention of sending it to the server using [webmethod]. [WebMethod] public static void SetProduct(Product product) { // I need the Product instance ...

javascriptasp.net

Automate logging in and out of Gmail chat by programmatically simulating clicks on the span elements that represent the chat status in Gmail

When I'm at work, I prefer using Gmail's encrypted chat feature because it logs chats without saving anything to the hard drive. However, when I'm at home, I switch to Pidgin as logging into Gmail chat at home can lead to messages ending up ...

javascriptgmailgreasemonkeychat

What is causing the child table (toggle-table) to duplicate every time a row in the parent table is clicked?

After creating a table containing GDP data for country states, I've noticed that when a user clicks on a state row, the child table displaying district GDP appears. However, there seems to be an issue with the child table as it keeps repeating. I&apos ...

javascripthtmlvue.js

Is there a way to access the value variable from a JavaScript file located in the javascript folder and bring it to the routes/index.js file in a Node.js and Express application?

I'm currently working on transferring the input value from an HTML search box to the index route file in Node.js using Express. I have successfully retrieved the value from the search box in the javascript/javascript.js file, and now my objective is t ...

javascriptnode.jsexpress

Encountering a parsing issue: an unexpected token was found, expecting "," instead

I'm encountering a Parsing error that states: Unexpected token, expected ",". I've been unable to pinpoint where the missing "," is located. Please refer to the image below for the exact line of the error. const cartSlice = createSlice({ name ...

javascriptreactjsreduxredux-toolkit

Combining photos seamlessly and bringing them to life through animation upon window loading

My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I woul ...

javascriptjqueryhtmlcss

Enhance a link using jQuery to allow it to expand and collapse

I am currently working on an MVC view that features a 3-column table showcasing a list of products. The first column, which contains the product names, is clickable and directs users to a specific product page. I am looking to implement functionality where ...

javascriptjqueryhtmlcss