Dashcode webapp 在转换时闪烁，仅在 iPhone Safari 中

Question

我使用 Dashcode 中的模板创建了一个简单的 RSS Web 应用程序。问题是，当从提要中选择列表中的项目时，过渡会闪烁（即使使用默认设置）。我猜是因为帖子中的图片。

我尝试完全禁用转换，但即使这样，返回列表时我也会出现闪烁。此问题似乎不会影响 OSX 上的 safari，仅影响 iPhone 上的 safari。

这是我认为负责的代码：

    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';
        }
    }
};

Answer 1

以下 CSS 规则修复了 iPad 上的所有“-webkit-transition”动画闪烁问题：

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

Answer 2

我不确定这对您的问题是否适用，但一般来说，如果不需要，您应该将背面可见性设置为隐藏。这很可能会消除页面上的所有闪烁。

-webkit-backface-visibility: hidden;