CODEWITHSUNDEEP
ioshtmlipadgoogle-chromecss
Crashalot
Crashalot

Reputation: 34523

Blinking/flickering of website text (text disappearing for moment then reappearing) on iPad and Chrome

If you visit http://www.tekiki.com on the iPad using Chrome, the site renders fine at first, but after a second or two, all text on the page gets hidden and re-appears a few moments later. It is almost like an extended blinking or flickering of the text.

On the desktop, this doesn't happen.

Any clues? We have tried -webkit-backface-visibility:hidden, but it made no difference. There is no animation, either.

Thanks!

Upvotes: 0

Views: 3105

Answers (3)

1nfiniti
1nfiniti

Reputation: 2070

A quick look at the page via developer tools tells me you've got a lot of elements on your page with display set to hidden. At the top of the footer, you've got an inline script that runs a bunch of jQuery that's not wrapped in a doc.ready call.

At the beginning of the script, you run this:

var SHOW_PAGE = 'FEATURED';

// Determine which page to show and configure accordingly
// Hide page specific elements first
$( '.featured, .catalog, .category, .list' ).hide();

// Show right page
if ( SHOW_PAGE == 'CATALOG' ) {
$( '.catalog' ).show();
get_web_data();
} else if ( SHOW_PAGE == 'CATEGORY' ) {
$( '.category' ).show();
get_web_data();
} else {
$( '.featured' ).show();
get_featured_apps();
}

Changing the display of each of these elements is going to trigger a redraw which can be a very expensive task on mobile. Don't know if that's your problem, but may be a good place to start - chrome may not have the same performance on iOS as safari @ handling that stuff.

Upvotes: 2

Robert McKee
Robert McKee

Reputation: 21477

You have a few things on the site that don't follow best practices.

Your scripts should be the last thing in the page, just prior to the closing body tag. You have scripts in the head, partially through the body, and some at the bottom.

You should have all styles in the head, and placed before any scripts (even if you don't follow the recommended script placement). Your CSS for your fonts are placed after two script tags, which will cause the loading the fonts to be delayed until the scripts are downloaded, parsed, and possibly executed -- this could (does) cause font "flicker" as the fonts are being delayed in loading. Additionally, you have style tags placed throughout the page, which can cause repaints, reflows, and flicker.

You have a conditional comment for styles to apply to IE between the head and body. Styles aren't valid there (that I am aware of). They should be placed after all the other styles, but remain within the head.

Remove the import statement from scaffold.css and place it on the page directly so that the browser can download your stylesheets in parallel instead of serially, or better yet, combine them into a single file to reduce the number of requests.

You might also consider minifying your CSS and javascript.

Actually, I was looking your non-mobile page, your mobile page looks a lot better, but you should reverse these:

<!-- JQ -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

<!-- Misc -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>

Font loading first, and then jquery. You might consider moving the jquery include to just before your script tag at the bottom of the page as well.

Upvotes: 5

Mark McCorkle
Mark McCorkle

Reputation: 9414

Reset your browser cache and try again. It tested fine on a few of my devices (iPad, iPhone, OSX).

Upvotes: 0

Related Questions