IE8 rendering bug

8 posts, 0 answers
  1. Wannes
    Wannes avatar
    12 posts
    Member since:
    Oct 2011

    Posted 11 Nov 2011 Link to this post

    Hello everyone,

    In IE8 (version: 8.0.7601.17514), the file input button is displayed in front of the "Select..." label, even though it clearly was styled to look transparent. From the CSS:
    .k-upload-button input {
      ...
      filter:alpha(opacity=0);
      ...
    }

    As a work-around, the input button can be hidden and the click on the label can be forwarded to the file input button, like so:
    $("#question-form-image-input").kendoUpload({
        // ...
    });
     
    // Fix for IE rendering bug:
    if ($.browser.msie) {
        $("#question-form-image-input").hide().next("span").click(function () {
            $("#question-form-image-input").click();
        });
    }

    Please fix it if possible.

    Best Regards,
    Wannes.
  2. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 11 Nov 2011 Link to this post

    Hello Wannes,

    I suggest you to read the following forum thread:

    http://www.telerik.com/community/forums/aspnet-mvc/upload/upload-control---partially-visible.aspx

    I noticed that the Kendo Upload still uses 500px font-size, so I reduced it to 200px.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Wannes
    Wannes avatar
    12 posts
    Member since:
    Oct 2011

    Posted 11 Nov 2011 Link to this post

    I'm sorry, reducing the font-size doesn't fix the issue. It really is the apha filter that doesn't seem to work. I have attached a screenshot of what I am seeing. It's the same as on your KenoUI demo page.

    On the Telerik demo page, it works perfectly, so I assume KendoUI beta2 doesn't yet contain that fix.

    Best Regards,
    Wannes.
  4. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 11 Nov 2011 Link to this post

    Hello Wannes,

    Are you sure you have changed (overridden) the font-size correctly? I inspected the MVC and Kendo Uploads and this is the only notable difference in terms of styling. Anyway, I have already changed the font-size on our side and it will take effect for the official Kendo release.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Wannes
    Wannes avatar
    12 posts
    Member since:
    Oct 2011

    Posted 11 Nov 2011 Link to this post

    Hello Dimo,

    You are right. There is almost no difference in the styling. What I tested next, was to skip the .kendoUpload() call and to just test the HTML itself. I tried putting a regular file input field inside your k-upload-button class:
    <div class="k-button k-upload-button">
        <input type="file" name="someFile" style="filter: alpha(opacity=0) !important;" />
    </div>
    This reproduces the issue. However, when the <div> is removed, the input field is correctly transparent.

    After some research, I found out that the DOCTYPE has an effect on alpha filters and also that IE8 requires the following CSS:
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    Yet none of all this works. Since the Telerik example does work, it must be one of those obscure, unexplicable IE-specific bugs. I will retest this later for the next release. Maybe you can check the basic upload example from your website in IE8 for your latest development version, to see if there are any issues?

    Best Regards,
    Wannes.
  6. Wannes
    Wannes avatar
    12 posts
    Member since:
    Oct 2011

    Posted 11 Nov 2011 Link to this post

    Update:
    Yep, it's a IE version-specific issue. IE 8.0.6001.18702 on Windows Server 2003 seems to work properly.
    Might be a new IE bug, might be a comination of IE security settings, virus scanners and Windows 7...
  7. Joel
    Joel avatar
    4 posts
    Member since:
    Nov 2011

    Posted 11 Nov 2011 Link to this post

    I have the same issue here.

    IE version 8.0.7600.16385, on Windows 7
  8. Wannes
    Wannes avatar
    12 posts
    Member since:
    Oct 2011

    Posted 16 Dec 2011 Link to this post

    The official 1.0 release fixes the issues.
    Well done!

    Best Regards,
    Wannes.
Back to Top