Famo.us: Как поместить поля формы в вид с прокруткой, который работает на iOS и Safari?

Question

Я пытаюсь создать форму прокрутки для мобильного веб-приложения, используя Famous ScrollView. Тем не менее, iOS показывает серьезные ошибки отображения при прокрутке, когда клавиатура активна. Это происходит ли с использованием InputSurface или встраивания <input> прямо в Поверхности 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

Проблема заключается в том, что знаменитый вид прокрутки не является прокручиваемым, они анимируют группу так, чтобы она выглядела гладкой, и добавляли эффект обновления для обновления.

Решение для этого: нет действительно прямого и аккуратного решения для этого, поскольку анимация клавиатуры iOS всегда будет фокусироваться на вводе, а с другой стороны, известный использует скрытый индикатор, который работает как полоса прокрутки, что противоречит алгоритму фокусировки iOS Таким образом, единственное возможное решение состоит в том, что знаменитость меняет способ анимации прокручиваемого изображения.

Временное решение:

• К счастью, есть обходной путь, если пользователь будет прокручивать от ввода, это означает, что он может быть не заинтересован в вводе текста больше, поэтому мы можем размывать целевой ввод после прокрутки представления.
• после многих поисков я действительно не нашел жесткого события для знаменитого, чтобы указать событие запуска прокрутки, однако наблюдатель мутации работал хорошо для достижения требуемого результата.

Famo.us ScrollView MouseOver - демонстрация jsFiddle

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">


      <link rel="stylesheet" type="text/css" href="https://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/lib/famous/core/famous.css">



      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
      <script type="text/javascript" src="http://rawgit.com/jperl/famous-compiled/e9c12b1fa657820d3f9bad093ea72e8ee2dfec46/dist/src/4f231991.polyfills.js"></script>

      <script type="text/javascript" src="https://rawgit.com/jperl/famous-compiled/97f85aaa64af255adfe0407c941e0e859b0759bc/dist/src/804b0adb.main.js"></script>


  <style>
    input { font-size: 40px; }
  </style>



<script type="text/javascript">
var observer;
window.onload=function(){
Famous.loaded(function () {
    var Engine = Famous.Core.Engine;
    var Surface = Famous.Core.Surface;
    var Modifier = Famous.Core.Modifier;
    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);

});
$("body").on("focus","input",function(){Observe($(this));});
$("body").on("blur","input",function(){endObserver();})
}


function Observe(event_input)
{
  var target = document.querySelector('.famous-group');

// create an observer instance
observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    event_input.blur();
    console.log(mutation.oldValue);
  });    
});

// configuration of the observer:
var config = { attributes: true, attributeOldValue: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);
}
function endObserver()
{
  observer.disconnect();
}

</script>


</head>
<body>
</body>

</html>

Живой пример можно найти на моей странице

Answer 2

Этот код, кажется, исправляет это путем принудительной перерисовки текстовых областей.

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

Обновленные скрипки: http://jsfiddle.net/byC98/87/ http://jsfiddle.net/byC98/88/

К сожалению, это скорее взлом, чем исправление:(

Загрузка процессора на старом ноутбуке:

Это модифицированная версия кода Роби из https://github.com/cubiq/iscroll/issues/178