javascript - Famo.us:如何将表单字段放入适用​​于 iOS 和 Safari 的 ScrollView 中？

Question

我正在尝试使用 Famous ScrollView 为移动 Web 应用程序创建滚动表单。但是，当键盘处于事件状态时滚动时，iOS 会出现严重的显示错误。无论使用InputSurface，都会发生这种情况或嵌入 <input> directly in the Surface HTML .

实现支持 Mobile Safari 的可滚动输入表单的最佳方式是什么？

(下面复制了 JSFiddle 代码；要查看该错误，请点击文本字段，然后在键盘处于事件状态时尝试滚动。)

Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Scrollview = Famous.Views.Scrollview;
    var Transform = Famous.Core.Transform;

    var mainContext = Engine.createContext();

    var scrollview = new Scrollview();
    var surfaces = [];

    scrollview.sequenceFrom(surfaces);

    var inputhtml = '<div><input type="text" value="test: edit me" /></div>';

    for (var i = 0, temp; i < 40; i++) {
        temp = new Surface({
            content: inputhtml,
            size: [undefined, 200],
            properties: {
                backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
                lineHeight: "200px",
                textAlign: "center"
            },
            index: i
        });

        temp.pipe(scrollview);
        surfaces.push(temp);
    }
    mainContext.add(scrollview);
});

Answer 1

此代码似乎通过强制重绘文本区域来修复此问题。

<style>
    input.force-redraw {
      text-shadow: rgba(0,0,0,0) 0px 0px 0px;
    }
</style>
<script>
    setInterval(function(){ 
        $('input').toggleClass('force-redraw');
    }, 10);
</script>

更新的 fiddle : http://jsfiddle.net/byC98/87/ http://jsfiddle.net/byC98/88/

不幸的是，这更多的是一种黑客攻击，而不是修复:(

旧笔记本电脑上的 CPU 利用率:

这是来自 https://github.com/cubiq/iscroll/issues/178#issuecomment-11941817 的 rooby 代码的修改版本