Skip to main content

Search and Top Navigation

#8388 closed bug (wontfix)

Opened June 08, 2012 10:09AM UTC

Closed June 08, 2012 01:36PM UTC

Last modified June 08, 2012 01:49PM UTC

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

Attachments (0)
Change History (6)

Changed June 08, 2012 12:20PM UTC by scottgonzalez comment:1

owner: → Zwonimir
status: newpending

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

Changed June 08, 2012 01:11PM UTC by Zwonimir comment:2

status: pendingnew

Replying to [comment:1 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

Changed June 08, 2012 01:17PM UTC by scottgonzalez comment:3

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?

Changed June 08, 2012 01:28PM UTC by Zwonimir comment:4

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

Changed June 08, 2012 01:36PM UTC by scottgonzalez comment:5

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).

Changed June 08, 2012 01:49PM UTC by Zwonimir comment:6

Replying to [comment:5 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