Hy,problemi di scorrimento con ExtJS 5 app all'interno IFrame
questo è ciò che la mia pagina di prova assomiglia:
L'area blu è la pagina principale e l'area verde è un IFrame che esegue un'applicazione ExtJS (finestra di visualizzazione semplice con all'interno un'etichetta).
Se il sito viene eseguito su un dispositivo touch (IPad, tablet Android, ecc.) Non è possibile scorrere la pagina "pulendo" sull'IFrame (l'area verde). Uno deve pulire sull'area blu per scorrere la pagina.
Questo funzionava correttamente in ExtJS v4.2.1 (vedere i collegamenti seguenti).
Test-Pagine:
https://skaface.leo.uberspace.de/ScrollTest/Ext510/ (non funziona come previsto, usando ExtJS v5.1.1)
https://skaface.leo.uberspace.de/ScrollTest/Ext421/ (funziona come previsto, lo stesso codice ma usando ExtJS V4.2.1)
il codice di prova:
sito Parent (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="margin: 50px; background-color: blue;">
<iframe src="frame.html" width="100%" height="1400" style="border: none;"></iframe>
</body>
</html>
IFrame (frame.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all-debug.css" />
<script type="text/javascript" src="https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
style: { 'background-color': 'yellowgreen' },
layout: 'fit',
items: [{
xtype: 'label',
text: 'Ext version: ' + Ext.versions.extjs.version,
margin: 16
}]
});
});
</script>
</head>
<body>
</body>
</html>
mi piacerebbe davvero apprezzare una soluzione per questo dal momento che rende praticamente inutile miei siti su dispositivi mobili, anche se aveva lavorato perfettamente bene con ExtJS 4.2.1.
Grazie & migliori saluti
Ps .: Ho già postato un bug report in the sencha forums, ma dal momento che non ho avuto alcun aiuto fino al sapere, sto anche cercando la mia fortuna su StackOverflow ...
[Eventi delegati e gesti in Ext JS 5] (https://www.sencha.com/blog/delegated-events-and-gestures-in-ext-js-5/) – davidcondrey
Perché non puoi rimuovere completamente il contenitore esterno e mostrare direttamente il contenuto interno, usando una imbottitura 50px sul corpo o simili? – BoffinbraiN
@davidcondrey Grazie per il collegamento, ho intenzione di dargli un'occhiata la prossima settimana. – suamikim