Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#8388 closed bug (wontfix)

Safari: iframe with streamed document overlay tab component

Reported by: Zwonimir Owned by: Zwonimir
Priority: minor Milestone: 1.9.0
Component: ui.tabs Version: 1.8.18
Keywords: Cc:
Blocked by: Blocking:

Description

Hi guyz!

I have a code like this:

<div id="container-1>
  <ul>
  <li><a href="#fragment-1"><span><span>
                            <img src="Images/pdf_16.png" height="12" alt="" style="border: 0px solid #000000;" /></span>
                          </span></a></li>
  <li><a href="#fragment-2"><span><span>
                            <img src="Images/pdf_16.png" height="12" alt="" style="border: 0px solid #000000;" /></span>
                          </span></a></li>
  </ul>
<div id="fragment-1">Pippo</div>
<div id="fragment-2">
        <!--File Documenti-->
        <table width="100%">
            <tr>
                <td>
                    <div>
                        <iframe width="100%" height="500px" style="border:1px solid #888888;"></iframe>
                    </div>
                </td>
            </tr>
        </table>
</div>
</div>

... programmaticallyI change the iframe.src with the location of a page that stream a PDF file with the "response.binarywrite / content type" method.

Result: all works fine in IE, FF, Chrome and Opera, but with the Windows version of Safari when I change tab from "fragment-2" to "fragment-1" the iframe with the streamed document still appears all over the tab control!

I though it's a z-index issue but changing it doesn't affect the result.

Thx and c u!

Zwonimir

Change History (6)

comment:1 Changed 8 years ago by Scott González

Owner: set to Zwonimir
Status: newpending

Does this not occur if you do the equivalent with plain JS + DOM operations?

comment:2 in reply to:  1 Changed 8 years ago by Zwonimir

Status: pendingnew

Replying to scott.gonzalez:

Does this not occur if you do the equivalent with plain JS + DOM operations?

It happens also with a flat, static page with only DOM markups and JS, like this one:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test_tab_iframe.aspx.cs" Inherits="test_tab_iframe" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery/jquery.js" type="text/javascript"></script>
    <script src="jquery/jquery-ui-tabs.js" type="text/javascript"></script>

    <link href="themes/jquery.tabs.css" rel="stylesheet" type="text/css" />
    <link href="themes/jquery.tabs-ie.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        jQuery(document).ready(
            function() {                
                $('#container-1 > ul').tabs();
              });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <div id="container-1">
    <ul>
        <li><a href="#fragment-1"><span>Tab 1</span></a></li>
        <li><a href="#fragment-2"><span>Tab 2</span></a></li>
    </ul>
    <div id="fragment-1">
        <iframe id="document-image" name="document-image" width="100%" height="500px" src="test_tab_iframe_streamfile.aspx"></iframe>
    </div>
    <div id="fragment-2">
        Tab 2
    </div>
    </div>

    </div>
    </form>
</body>
</html>

... the "test_tab_iframe_streamfile.aspx" page has a server-side code like this:

using System;
using System.Collections.Generic;
using System.IO;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class test_tab_iframe_streamfile : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        Response.Buffer = false;
        Response.ContentType = "application/pdf";
        Response.BinaryWrite(File.ReadAllBytes(@"C:\document.pdf"));
        Response.End();
    }
}

... and of course this problem happens only with Apple Safari (I've tested only with the Windows version).

Thank you! Zwonimir

comment:3 Changed 8 years ago by Scott González

Status: newpending

Sounds like there's nothing for us to do with this. It seems like the old IE <select> problem. Would you mind testing with Chrome and seeing if it's affecting multiple WebKit browsers or just Safari?

comment:4 Changed 8 years ago by Zwonimir

Status: pendingnew

I've tested it with IE, FF, Chrome and Opera and all works fine ... the problem is with Safari, and a second ago I've discovered that it works also with Safari if I stream a file with the "text/plain" content type ... it seems that there's a problem with the Safari PDF Plugin (Acrobat Reader in my situation, so the same that I use with all the others browsers) ...

Thx, Zwon

comment:5 Changed 8 years ago by Scott González

Resolution: wontfix
Status: newclosed

I'm not sure if we can fix this, but it doesn't seem like we should even if we can. This problem is unrelated to tabs (and jQuery for that matter).

comment:6 in reply to:  5 Changed 8 years ago by Zwonimir

Replying to scott.gonzalez:

I'm not sure if we can fix this, but it doesn't seem like we should even if we can. This problem is unrelated to tabs (and jQuery for that matter).

I think so ...

I've tried also with this workaround:

$("#container-1 > ul").bind('tabsselect'
                    , function (event, ui) {
                        var tabSelezionato = String(ui.tab);
                        if (tabSelezionato.indexOf('#fragment-1') < 0) {
                            $('#document-image').css("display", "none");
                        } else {
                            $('#document-image').css("display", "block");
                        }
                    });

... but it doesn't work, in Safari u can't hide the iframe if it streams the PDF, the only workaround I found it works is this one:

$("#container-1 > ul").bind('tabsselect'
                    , function (event, ui) {
                        var tabSelezionato = String(ui.tab);
                        if (tabSelezionato.indexOf('#fragment-1') < 0) {
                            $('#documentimage').attr('src', 'about:blank');
                        } else {
                            $('#documentimage').attr('src', 'test_tab_iframe_streamfile.aspx');
                        }
                    });

thank you! and maybe with the Mac version of Safari it works different ... I'll try!

Zwon

Note: See TracTickets for help on using tickets.