科尔多瓦iOS - 转换导致页面闪烁

我正在Cordova开发应用程序，用户可以在几个“屏幕”之间切换，这些屏幕只是隐藏的div，通过转换进入视图。科尔多瓦iOS - 转换导致页面闪烁

iOS上的滚动操作非常糟糕，所以我将-webkit-overflow-scrolling: touch添加到了容器元素中，并且整理了我所遇到的滚动问题。

但是，从那时起，页面转换会导致页面在应用程序移动到新页面时闪烁。

这里是我的CSS

.scrollable { 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
}

一旦按下按钮，以进入下一个页面，它使用这个JavaScript代码的过渡

this.lastScreen.getLayout().getElement().css({ 
    'left': -$(window).width(), 
    'transition': 'left 0.25s ease-out' 
}); 

this.currentScreen.getLayout().getElement().css({ 
    'left': 0, 
    'transition': 'left 0.25s ease-out' 
}); 

<div class="container scrollable"> 
    //screen content here 
</div>

如果我从滚动类中删除了-webkit-overflow-scrolling: touch;它工作正常，不会发生闪光。但是，页面的滚动非常糟糕。

我正在运行iOS 9.3.1。我读了一遍，发现这可能是来自iOS 8+的问题，但无法真正找到difinitve的答案来帮助我

来源

2016-05-13 Pooshonk

有您尝试从转换中分离滚动吗？ DIV1是过渡，在它内部，DIV2具有滚动属性。 – hdezela

我建议你在cordova的应用程序中使用原生转换。

http://plugins.telerik.com/cordova/plugin/native-page-transitions

来源

2016-05-17 13:22:37 Breixo

这个CSS添加到具有过渡类：

-webkit-transform: translate3d(0px,0px,0px);

它只是迫使硬件加速，所以它变得比正常的更顺畅，而且很可能解决您的问题

来源

2016-05-19 14:55:52 Del

我会将此添加到this.lastScreen.getLayout（）。getElement（）的CSS吗？ – Pooshonk

是的，在每个过渡不顺畅的地方 – Del

好吧，我会试试 – Pooshonk

科尔多瓦iOS - 转换导致页面闪烁

回答

相关问题