【Salesforce】SafariでVFページが勝手にトップへスクロールされる
少し前からたまに修正依頼がきます。
iPadやiphoneでVisualforceページを閲覧していると、何らかのイベントが発生したタイミングでページが一番上へスクロールされる、という問題です。
縦に長いページで起こる問題のようですね。
ボタンすら動かないとかで、お客さんが怒ってました。
なかなか解決策が出てきませんでしたが、頭が良い人はたくさんいるものです。
https://success.salesforce.com/issues_view?id=a1p30000000T2oLAAS
上のURLにも書かれていますが、サポートされているわけではないので自己責任で使ってね、とのころです。
その1
(function(){try{var a=navigator.userAgent;
if((a.indexOf('Salesforce')!=-1)&&(a.indexOf('iPhone')!=-1||a.indexOf('iPad')!=-1)&&(a.indexOf('OS/8')!=-1||a.indexOf('OS 8')!=-1)&&(a.indexOf('Safari')==-1)){
var s=document.createElement('style');
s.innerHTML="html,html body{overflow: auto;-webkit-overflow-scrolling:touch;}body{position:absolute;left:0;right:0;top:0;bottom:0;}";
document.getElementsByTagName('head')[0].appendChild(s);}}catch(e){}})();
その2
var ua=navigator.userAgent;
if((ua.indexOf('Salesforce')!=-1)&&(ua.indexOf('iPhone')!=-1||ua.indexOf('iPad')!=-1)&&(ua.indexOf('OS/8')!=-1||ua.indexOf('OS 8')!=-1)&&(ua.indexOf('Safari')==-1)){
function IOS_SCROLL_BOOTSTRAP() {
var children = Array.prototype.slice.call(document.body.children),
placeholder = document.createElement('section'),
fragment = document.createDocumentFragment(),
styles,
width,
height;
children.forEach(function(c){fragment.appendChild(c);});
placeholder.appendChild(fragment);
styles = [
'width:100%;',
'height:', (window.screen.height - 42), 'px;',
'position: absolute; overflow: auto; -webkit-overflow-scrolling: touch'
].join('');
placeholder.style.cssText = styles;
document.body.appendChild(placeholder);
}
window.addEventListener('load', function (e) {
IOS_SCROLL_BOOTSTRAP();
});
}
その1はCSSを追加して、その2はセクションを丸ごと追加する形になるのでしょうか。
どちらもブラウザを取得していますが、最新のバージョンでないのでご注意ください。
ちなみに、その1はブラウザの判定を消しても動きました。
その2は試していません。
その1だけで実装し、それでも駄目なら、その2も追加する形で大丈夫そうです。
思ったのですが、SalesforceとiOSは相性がそんなに良くないのかもしれませんね。
No comments.