FancyBox 2. iframe。在输入表单元素中的输入文本时，它会跳到底部

Posted 2023-05-09

【中文标题】FancyBox 2. iframe。在输入表单元素中的输入文本时，它会跳到底部

【英文标题】：FancyBox 2. iframe. On input text in form element when typing it jumps down to bottom

【发布时间】：2018-07-05 20:40:50

【问题描述】：

我的页面上有一个花式框。在桌面上还可以，但是当我尝试在 ios 上的 Safari 上打开时，它失败了。

iframe 中的内容很长。当我开始输入时，整个页面会跳到花式框的底部，所以我看不到我输入的内容。如果我删除 som 内容以使内容适合 iframe，则它不会跳转。

javascript 代码

$(".fancyBox").fancybox(

    openEffect: 'none',
    closeEffect: 'none',
    prevEffect: 'fade',
    nextEffect: 'fade',
    tpl: 
         closeBtn: '<div title="Close" class="btn doccit-button waves-effect'+closePadding+'" id="fancyClose">'+closeText+'</div>'
        ,
    topRatio    : 0,
    fitToView           : false,    
    type                : 'iframe',
    iframe : 
           preload: false
     ,
    padding             : 12,
    beforeLoad: function () 
        //console.log($(this.element).data('url'));
        if ($(this.element).data('url')) 
        var url = $(this.element).data('url');
        this.href = url
        
    ,
    beforeShow: function () 
        var fancyWidth = 1100;
        var fancyHeight = 700;
        var fancyMargin = [60,8,8,8];
        if($(this.element).data('width'))   fancyWidth = $(this.element).data("width") ;
        if($(this.element).data('height'))   fancyHeight = $(this.element).data("height") ;
        if($(this.element).data('margin'))   fancyMargin = $(this.element).data("margin") ;
        if ($(window).width() <= 1154) 
            this.width  = "100%";
            this.height  = "84%";
         else 
            //alert("ipad");
            this.width  = fancyWidth;
            this.height  = fancyHeight;
            this.margin = fancyMargin
        ;

    ,
    helpers: 
        overlay: 
            locked: false,
            closeClick: false,
            css : 
                  'background' : 'rgba(241, 241, 241, 0.95)'
                 
        
    ,
    afterClose: function() 
        if($(this.element).data("autoreload") == 'ja') parent.location.reload(true);
        if($(this.element).data("autoredirect") == 'ja') location.href = "index.asp";
        var redirectUrl = $(this.element).data("autourl");
        if (redirectUrl != undefined) location.href = redirectUrl;
    ,
     afterShow: function () 
        $(".fancybox-wrap").draggable();
    

);

Before typing

When starts typing it jumps down

【参考方案1】：

这是由这个 WebKit 错误 - https://bugs.webkit.org/show_bug.cgi?id=176896 引起的 - 希望在 iOS 11.3 中得到修复