Zebra Dialog with Microsoft Edge

[saTrilogy]

I have an issue with dialogues being "cut-off" as a user scrolls down a page when one or more dialogues are being shown - but, only on the Microsoft Edge Browser.

There is a post detailing this issue more on [http://wpmaia.azurewebsites.net/using-microsoft-edge-browser/] and, of course, there are many sample on that UA website to test the problem against.

Any ideas?

[stefangabos]

I am unable to reproduce it. Please show me how you initialise Zebra_Dialog

[saTrilogy]

Wherever I wish to invoke a dialogue I use one of two functions - they differ only in their options as to class name, size etc. One of those functions is...

window.FileViewHandler = function(fileTag, sizeLimit, fileTitle, offset){
    jQuery("#ajaxSpinner").show();
    var calcOffset = jQuery(".ZebraDialog").length * 46;
    dlgHorz = (offset == 0 ? 'center + ' + calcOffset : 'center + ' + offset);
    dlgVert = (offset == 0 ? 'middle + ' + calcOffset : 'middle + ' + offset);
      var parms = {
      action: "ajaxViewFileItem",
      tag: fileTag,
      limit: sizeLimit
    };
    jQuery.post(ajaxurl, parms, function(response) {
      new jQuery.Zebra_Dialog('
' + response + '
', {
        title: fileTitle,
        buttons: false,
        modal: false,
        auto_close: false,
        custom_class: 'maiaFileViewDlg',
        keyboard: true,
        max_height: 400,
        overlay_close: true,
        position:   [dlgHorz, dlgVert],
        show_close_button: true,
        type: false,
        vcenter_short_message: false,
        width: 720,
        onClose: function(e) {
          jQuery(".qtip").qtip("hide");
        }   
      });
      jQuery(".ZebraDialog_Body").addClass("wkscroll");
      jQuery(".ZebraDialog_Body").css('padding',"8px");
      jQuery(".maiaFileViewDlg").draggable();
      jQuery(".maiaFileViewDlg").prop(
        "title",
        "Click the close button or press the ESC key to close this dialogue. If activated by hovering the mouse, pressing ESC will close the dialogue but it will reopen unless you've moved the cursor away from the active element. You may drag this dialogue around the screen."
      )
      .qtip({
        position: {
          my: "bottom center",
          at: "top center",
          target: jQuery(".maiaFileViewDlg") },
        show: {
            solo: true
        }
      });
          jQuery("#ajaxSpinner").hide();
    });
};

[saTrilogy]

If you go to [http://wpmaia.azurewebsites.net/about-maia/] (in Edge), under the heading "What does a Maia program look like?", there is a link to tut8.tv [591 B]. Hover over it to see dialogue then try scrolling the screen down (not the dialogue content) towards the page footer.

[stefangabos]

I think the problem is whatever there is that hides the social buttons and the yellow "Contact form" sticky button on the right when scrolling down

Or is that because of Zebra_Dialog?

[saTrilogy]

I think they're just additional symptoms rather than causes as they also use fixed div overlays and none of this behaviours are present on other browsers. So I'd be inclined to point the finger directly at Edge but will try, on the development server, suppressing the social and contact overlays.

[stefangabos]

No, I don't think the problem is with the social icons. It's with whatever hides them when scrolling. Maybe that sticky header?

[saTrilogy]

I tired the earlier suggestion with no effect. However, you are right - it is the sticky header. I'll try some jQuery to "unstick" it when the browser is edge. Thank you.

[saTrilogy]

Actually, have to unstick the header AND remove contact and social overlays - pretty much everything with position fixed. This I'm not prepared to do. In fact if one reduces the page zoom the behaviour changes and, sometimes, page scrolling, slowly, "works" or the dialogues will disappear then reappear - as will the (fixed) header and other overlays. And, when F12 tools are showing, behaviour changes again!

This is bloody annoying but clearly not your problem. This kind of "variable", almost random, behaviour can only be attributed to the host HTML parser - that is, Edge. I can't imagine that opening the problem with MS will do any good so I guess it's just something one will have to live with if browsing with Edge.