Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    PNG Images Not Displayed Issue

    Hi,

    We have come to an issue where PNG images are not displayed in IE, because they are loaded via specific Microsoft filter instead of pointing the SRC to the image URL directly.

    For example:
    progid:DXImageTransform.Microsoft.AlphaImageLoader(src="IMGSRC",sizingMethod="scale");

    This caused due the fact that this filters are ActiveX controls which are disabled in hight security IE settings.

    The exact setting for only IE filters is this one:
    IE Tools Menu > Internet Options > Security Tab > Custom Level... Button > ActiveX controls and plug-ins Settings Section > Binary and script behaviors > Enable/Disable.

    In our case it is highly possible that our customers may have such restrictions turned on.

    To ask a question is there an easy way to point to the SRC directly, rather then using filter for IE?

    In most cases the big issues comes from PNG images used for icons.

    Setting the SRC with the direct path to the image work no matter the security settings.
    I'm aware that this may cause visual inconstancy in IE6, but this is easy to fix + IE6 is no longer that high priority browser.

    The only obvious solution for me right now is to patch the CORE JS files and fix this on very low level, but I'm not in favor of this methods, but will have to use it if no alternate option is available.

    Please consider this issue in further development.

    - Ivan
    Tags: None
    #2
    Got an easy fix on my own.
    Just had to use the trick with adding "?" after the image URL:

    icon: "/mypath/myicon.png?"

    That way the link is perfectly valid for browsers, but the script no longer think of the image as PNG. Nice!

    Any other solution is welcome.
    I saw a line in Canvas.js - "this.neverUsePNGWorkaround != true", but did not found a way to set it to true from outside.

    Comment

      #3
      Hi Jakooth,

      Interesting trick.

      You can set the (undocumented, subject to change) neverUsePNGWorkaround via:

      Code:
         isc.Canvas.addProperties({neverUsePNGWorkaround:true});
      A few things to keep in mind:
      - IE6 is by far the most common browser in large enterprises and will be for approximately 1.5 years with current trends
      - IE7 still does not handle PNG transparency correctly without the IE filter trick. It breaks with opacity settings, which includes fade animations
      - IE7 has yet further bugs with rendering PNGs without using filter - a blurring effect with tiled .pngs - that can come up if IE filters are used anywhere on the page
      - the above IE7 problems were not fixed by IE8 beta 1

      Comment

        #4
        PNG Images Not Displayed Issue

        Hi,

        i have the same problem with this "Binary and script behaviors"
        but using your code
        Code:
        isc.Canvas.addProperties({neverUsePNGWorkaround:true});
        does not solve the problem.

        Are there any other possible solutions?

        Comment

          #5
          @phk: in your case, we don't know what the problem is yet :)

          If you have correctly used the workaround you should see that, for example, rounded windows are "squared out" with an (unattractive) gray background. If you do not see this, the workaround is incorrectly applied. Be sure you run that line of code after SmartClient is loaded and before any components are created.

          Comment

            #6
            This is what i do.
            Here is my code:
            Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Album</title>
  <script type="text/javascript">/* <![CDATA[ */
    var isomorphicDir="SmartClient/isomorphic/";
  /* ]]> */</script>
  <script type="text/javascript" src="SmartClient/isomorphic/system/modules/ISC_Core.js"></script>
  <script type="text/javascript" src="SmartClient/isomorphic/system/modules/ISC_Foundation.js"></script>
  <script type="text/javascript" src="SmartClient/isomorphic/system/modules/ISC_Containers.js"></script>
  <script type="text/javascript" src="SmartClient/isomorphic/system/modules/ISC_Grids.js"></script>
  <script type="text/javascript" src="SmartClient/isomorphic/system/modules/ISC_Forms.js"></script>
  <script type="text/javascript" src="SmartClient/isomorphic/system/modules/ISC_DataBinding.js"></script>
  <script type="text/javascript" src="SmartClient/isomorphic/skins/TreeFrog/load_skin.js"></script>
</head>

<body>
</body>

<script type="text/javascript">/* <![CDATA[ */
  isc.Canvas.addProperties({neverUsePNGWorkaround:true});
  isc.defineClass('clsResultSetBilder','ResultSet');
  isc.clsResultSetBilder.addProperties({
    dataArrived:function(pStartRow,pEndRow){
      if(this.getLength()>0){
        Bilder.recordClick(null,this.get(0),null,null,null,null,null);
      }else{
        if(Bild.src!=='/bilder/hintergrund.jpg'){
          Bild.animateFade(0,
            function(){
              Bild.setSrc('/bilder/hintergrund.jpg');
              Bild.animateFade(100);
            });
        }
      }
    }
  });

  isc.DataSource.create({
    ID:"dsAlben",
    dataURL:"xml/alben",
    recordXPath:"/zeilen/zeile",
    dataProtocol:"postParams",
    fields:[
      {name:"id",          type:"text", primaryKey:true},
      {name:"parentid",    type:"text", rootValue:''},
      {name:"pfad",        type:"text"},
      {name:"bezeichnung", type:"text"},
      {name:"zeilen",       childrenProperty:true}
    ]
  });
  isc.DataSource.create({
    ID:"dsBilder",
    dataURL:"/xml/bilder",
    recordXPath:"/zeilen/zeile",
    dataProtocol:"postParams",
    resultSetClass:isc.clsResultSetBilder,
    fields:[
      {name:"id",           type:"text", primaryKey:true},
      {name:"parentid",     type:"text", foreignKey:"dsAlben.id"},
      {name:"pfad",         type:"text"},
      {name:"beschreibung", type:"text"}
    ]
  });

  isc.HLayout.create({
    width:'100%',
    height:'100%',
    resizeBarSize:3,
    members:[
      isc.TreeGrid.create({
        ID:"Alben",
        width:200,
        showResizeBar:true,
        dataSource:dsAlben,
        autoFetchData:true,
        showHeader:false,
        dataProperties:{openProperty:"isOpen"},
        recordClick:function(pViewer,pRecord,pRecordNum,pField,pFieldNum,pValue,pRawValue){
                      Bilder.fetchData({parentid:pRecord.id});
                    },
        fields:[{name:"bezeichnung",title:"Bezeichnung"}]
      }),
      isc.ListGrid.create({
        ID:"Bilder",
        width:171,
        dataSource:dsBilder,
        autoFetchData:false,
        showHeader:false,
        recordClick:function(pViewer,pRecord,pRecordNum,pField,pFieldNum,pValue,pRawValue){
                      Bild.animateFade(0,
                        function(){
                          Bild.setSrc('/bilder/normal/'+pRecord.pfad);
                          Bild.animateFade(100);
                        });
                    },
        fields:[{name:"pfad",title:"Bild",type:"image",imageSize:150,imageURLPrefix:"/bilder/minimal/",width:150},
                {name:"pfad",type:"image",imageURLPrefix:"/bilder/normal/",visibility:"hidden"}]
      }),
      isc.Img.create({
        ID:"Bild",
        imageType: "center",
        src:"/bilder/hintergrund.jpg",
        border:"1px solid gray",
        overflow: "auto",
        cursor:"pointer",
        click:function(){
          window.location=this.src.replace('/bilder/normal/','/bilder/maximal/');
        }
      })
    ]
  });
/* ]]> */</script>

</html>
            and to see the result, here is my url:
            http://album.kaufmann-info.net/

            Comment

              #7
              You must use
              Code:
              isc.Canvas.addClassProperties({neverUsePNGWorkaround:true});
              Bye!

              Comment

              Previous template Next
              Working...
              X