Dashcode webapp flickers upon transition, only in iPhone Safari

Question

I created a simple RSS web app using the template in Dashcode. Problem is, when choosing items in the list from the feed the transition flickers (even with the default settings). I am guessing its because of the images in the posts.

I tried disabling the transitions completely but even then I get a flickering when returning to the list. This problem does not appear to affect safari on OSX only on the iphone.

Here is the code that I think is responsible:

    var topStories = parseInt(attributes.topStories, 30);

function load()
 {
    dashcode.setupParts();

    // set today's date
    var todaysDate = document.getElementById("todaysDate");
    todaysDate.innerText = createDateStr(new Date()).toUpperCase();

    setupFilters("headlineList");

    // This message checks for common errors with the RSS feed or setup.
    // The handler will hide the split view and display the error message.
    handleCommonErrors(attributes.dataSource,
    function(errorMessage) {
        var stackLayout = document.getElementById("StackLayout")

        if (stackLayout) {
            stackLayout.style.display = 'none';
        }

        showError(errorMessage);
    });

    // get notifications from the stack layout when the transition ends
    document.getElementById("StackLayout").object.endTransitionCallback = function(stackLayout, oldView, newView) {
        // clear selection of lists when navigating to the first view
        var firstView = stackLayout.getAllViews()[0];
        if (newView == firstView) {
            document.getElementById("headlineList").object.clearSelection(true);
        }

    }

}

function articleClicked(event)
 {
    document.getElementById("StackLayout").object.setCurrentView("articlePage", false, true);
}

function backToArticlesClicked(event)
 {
    document.getElementById("StackLayout").object.setCurrentView("frontPage", true);
}

function readMoreClicked(event)
 {
    var headlineList = dashcode.getDataSource('headlineList');
    var secondHeadlines = dashcode.getDataSource("secondHeadlines");
    var selectedItem = null;

    if (headlineList.hasSelection()) {
        selectedItem = headlineList.selectedObjects()[0];
    } else if (secondHeadlines.hasSelection()) {
        selectedItem = secondHeadlines.selectedObjects()[0];
    }

    if (selectedItem) {
        var link = selectedItem.valueForKeyPath('link');

        // If the link is an object, not a string, then this may be an ATOM feed, grab the actual
        // href from the href attr
        if (typeof(link) == 'object') {
            link = selectedItem.valueForKeyPath('link.$href');

            // If the link is an array (there is more then one link), just grab the first one
            if (DC.typeOf(link) == 'array') {
                link = link[0];
            }
        }

        window.location = link;
    }

}

var headlineListDataSource = {

    // The List calls this method once for every row.
    prepareRow: function(rowElement, rowIndex, templateElements) {
        if (rowIndex >= topStories) {
            templateElements['headlineDescription'].style.display = 'none';
            templateElements['headlineTitle'].style.fontSize = '15px';
        }
    }
};

score 2 · Answer 1 · answered Oct 14 '10 at 14:37

2

The following CSS rule fixed all of my "-webkit-transition" animation flickering issues on the iPad:

body {-webkit-transform:translate3d(0,0,0);}

answered Oct 14 '10 at 14:37

Brian D'Astous

1,314
1
18
26

Holy, crap, that worked on the now-ubiquitous Webkit flashes! Where did you find this trick? [Edit: but it also destroys pages in safari 5.1. Back to the drawing board....] – Doug Avery Jun 24 '11 at 19:59

score 2 · Answer 2 · answered Jan 05 '11 at 15:35

2

I am not sure how well that applies to your problem but in general you should set the backface visibility to hidden if not needed. That will most likely kill all flickering on a page.

-webkit-backface-visibility: hidden;

answered Jan 05 '11 at 15:35

Nonlinearsound

928
8
17

Dashcode webapp flickers upon transition, only in iPhone Safari

2 Answers2