IE 11 - RadButton not displaying embedded icons

[Anil]

We are using telerik version 2017.2.711.45 in our application. We are currently experiencing an issue in IE 11 with Radbutton when rendered as 'lightweight' mode does not display the icons. After some research I found that enabling the font download in the internet explorer settings fixes the issue, but as part of admin policy we are not allowed to make this settings change.

Can you please provide any work around for this.

 

[Anil]

Can someone assist me on this reported issue?

[Tim]

Thank you for your post Anil.  On my project I am having the same problem as you have described.  I would like to see someone from the Telerik Admin to please comment on the mentioned issue.  It appears renderMode in lightweight is not a safe rendering mode if IE is required. (when is IE not required?) I believe that renderMode in classic is the only option for this scenario.

[Rumen]

Hello,

The problem is due to the untrusted font blocking security policy from Microsoft that blocks all fonts (not only the ones used in Telerik UI for ASP.NET AJAX, KendoUI) outside of %windir%/fonts from loading. You can find more information about the problem in Font Icons are not loaded in IE11 (Telerik Forum) and IE 11: error CSS3111 in my own code, and google.com/fonts doesn't render any fonts (StackOverflow).

This problem should be fixed in the latest Microsoft patches as per the following MSDN blog post: Dropping the “Untrusted Font Blocking” setting.

Best regards,
Rumen
Progress Telerik

[Anil]

Thanks for the reply, I looked at the reference links that you had suggested.

Per Ivan Zhekov, in his post  in Font Icons are not loaded in IE11 he mentioned that

"Just to be on the same page, Untrusted font blocking policy differs from Allow font download policy. The former disabled use of fonts not located within windir/fonts directory (for any Microsoft app), while the latter simply doesn't download any fonts (in Internet Explorer and Edge)."

"Allow font download policy" in the internet explorer -The internet explorer settings are controlled by the admin and allow font download for IE 11 is set to disabled due to security reasons.

So my question is there any other possible solutions to display embedded icons in IE browser for telerik Ajax controls.

 

 

[Rumen]

Hi Anil,

If the "Allow font download policy" setting of the Internet Explorer is enabled, there is not a way to load the font icons used by the Lightweight rendering.

Presently, the available options are:
- talk with the system/network administrators to disable this policy/setting
- or switch back to Classic rendering (set RenderMode="Classic"), which uses image sprites for icons.

Best regards,
Rumen
Progress Telerik

[Milind]

Hello Rumen,

I have referred your post since I was facing the same issue(RadListbox buttons, not displaying embeded icons). I updated all win 10 patches and currently my windows 10 environment is up to date. I am running telerik asp.net ajax ver R3 2019 with vs2019 community. When I use RadListbox the icons on buttons are not displayed. If I set render mode to Classic then and then only the icons are displayed. This is happening even after updating all windows update patches as said above. Is there any other solution than to set the render mode to Classic, to handle this problem. I tried using latest versions of Firefox, Chrom and Edge, every where the icons are not displayed if the render mode is not Classic

Thanks & regards

Milind Shevade

[Rumen]

Hi Milind,

Thank you for the detailed information and testing you have performed on your end!

The problem can be due to the untrusted font blocking security policy from Microsoft that blocks all fonts (not only the ones used in Telerik UI for ASP.NET AJAX, KendoUI) outside of %windir%/fonts from loading. You can find more information about the problem in Font Icons are not loaded in IE11 (Telerik Forum) and IE 11: error CSS3111 in my own code, and google.com/fonts doesn't render any fonts (StackOverflow). This problem should be fixed in the latest Microsoft patches as per the following MSDN blog post: Dropping the “Untrusted Font Blocking” setting.

Other reasons for facing the problem:

• The security settings of IE are set to High, which disables the  "Allow font download policy", which prevents the loading of the font icons used by the Lightweight rendering.
  
  
• Use software rendering instead of GPU rendering is disabled - Go to Internet Options -> Advanced -> Accelerated graphics -> Check  "Use software rendering instead of GPU rendering"

 

 

Regards,
Rumen
Progress Telerik

[RAJAT]

Hi - I know this is an old chain - but I'm running into the same problem now in CHROME as well as IE and Edge - the picture integrated into the button is not showing until I mouse over the button itself - then it shows and stays there until the next postback - when it disappears again.

If I put the button into Classic rendermode - the image is there on all three browsers, but classic rendermode mixed with lightweight leads to some other weird stuff happening.  The look of the radio buttons and the button itself changes in this mode.

I'm using Telerik ASP.NET version 2020.1.219.45 at the moment.

Any help would be greatly appreciated!

[RAJAT]

To be more clear - I've added a picture... the left hand one is what draws when the page is drawn.  If I mouse over and off of the button, I get the right hand picture.  And this problem is the same in Chrome, Edge and IE 11.

 

Thanks!

Cory

[Doncho]

Hi Cory,

Thank you for the screenshots provided!

I am afraid I was not able to reproduce the described appearance issue.

Please double-check if all the suggested possible causes listed in Rumen's last post in this thread are eliminated.

It would be helpful if you provide us the markup declaration of the RadButton and the styles applied so that we have a better overview of the current case.

I would also suggest testing if the RadButton acts the same way if isolated on a page. 

Looking forward to hearing from you!

Kind regards,
Doncho
Progress Telerik

[RAJAT]

I'll create an isolated case with just the rad button on a page and get back to you with the example.

 

Thanks!

cory

[RAJAT]

I've isolated a single page in my application.  Even with just the isolated page the button fails to show the graphic until you mouse over or click it.  On the return from the server, the page is once again displayed without graphics on the buttons.  

I can't post the actual project.. but here is the button declaration:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="TestButton.aspx.cs" Inherits="AMS.TestButton" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    <telerik:RadButton ID="btnSave" runat="server" Text="Save" Width="120px" Height="36px" OnClick="btnSave_Click"
        RenderMode="Lightweight">
        <Icon PrimaryIconUrl="images/Save2.png" PrimaryIconTop="3px" PrimaryIconLeft="3px" PrimaryIconWidth="30px" PrimaryIconHeight="30px"></Icon>
    </telerik:RadButton><br />
    <telerik:RadButton ID="btnAdd" runat="server" Text="Add" Width="120px" Height="36px" OnClick="btnAdd_Click"
        RenderMode="Lightweight">
        <Icon PrimaryIconUrl="images/Insert.png" PrimaryIconTop="3px" PrimaryIconLeft="3px" PrimaryIconWidth="30px" PrimaryIconHeight="30px"></Icon>
    </telerik:RadButton><br />
    <telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" Width="120px" Height="36px" OnClick="btnCancel_Click"
        RenderMode="Lightweight">
        <Icon PrimaryIconUrl="images/Cancel.png" PrimaryIconTop="3px" PrimaryIconLeft="3px" PrimaryIconWidth="30px" PrimaryIconHeight="30px"></Icon>
    </telerik:RadButton>

</asp:Content>

 

Here is my master page: 

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="AMS.MasterPage" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Access Management System</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="-1" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="cache-control" content="no-store" />
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1, maximum-scale=1.0, user-scalable=no" />
    <link href="styles/base.css" rel="stylesheet" />
    <link href="styles/mega.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

</head>
<body style="background-color:#e9eaea">

    <form id="form1" runat="server">

        <telerik:RadScriptManager runat="server" ID="RadScriptManager1"></telerik:RadScriptManager>

        <div id="wrapper">
        <telerik:RadPageLayout runat="server" ID="MasterLayout" GridType="Fluid">

            <Rows>
                <%--Header--%>

                <telerik:LayoutRow CssClass="header">
                    <Columns>
                        <%--Logo--%>
                        <telerik:LayoutColumn Span="4" SpanMd="5" SpanSm="12" SpanXs="12">
                             <a href="Default.aspx" style="text-decoration:none">
                                <div style="color: white; font: bold 1.5em calibri, verdana; width: 300px; text-align:center;">Access Management System</div>
                                <div style="color: white; font: bold 3em calibri, verdana; width: 300px; text-align:center;">App Portal</div>
                             </a>
                        </telerik:LayoutColumn>

                        <%--Main Nav--%>
                        <telerik:LayoutColumn Span="8" SpanMd="7" SpanSm="12" SpanXs="12">
                            <div class="lblName">
                                <asp:Label ID="lblName" runat="server" Text=""></asp:Label>
                            </div>
                            <br /><br /><br />
                            <div id="menu-wrapper">
                                <ul class="nav" id="MenuItems" runat="server">

                                </ul>
                            </div>
                        </telerik:LayoutColumn>
                    </Columns>
                </telerik:LayoutRow>

                <%--Main--%>
                <telerik:LayoutRow CssClass="main">
                    <Columns>
                        <%--Content--%>
                        <telerik:CompositeLayoutColumn Span="12">
                            <Content>
                                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                </asp:ContentPlaceHolder>

                                <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                                </asp:ContentPlaceHolder>
                            </Content>
                        </telerik:CompositeLayoutColumn>
                    </Columns>
                </telerik:LayoutRow>

                <%--Footer--%>
                    <telerik:LayoutRow>
                        <Columns>
                            <telerik:LayoutColumn CssClass="footer">
                                <hr />
                                AMS Version 2.1 - Syncrude Canada Ltd.
                            </telerik:LayoutColumn>
                        </Columns>
                    </telerik:LayoutRow>
            </Rows>
        </telerik:RadPageLayout>
       </div>

    </form>

</body>
</html>

 

and here are the two style sheets:  

Base.css:

* {margin:0;padding:0}

/*normalize*/
html,
body,
form {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font: normal 14px "Segoe UI", Arial, sans-serif;
    color: #555555;
}

@media only screen and (min-width: 481px) and (max-width: 720px) {
    body {
        font-size: 18px;
    }
}

@media only screen and (max-width: 480px) {
    body {
        font-size: 20px;
    }
}
a {
  background: transparent;
}

img {
  border: 0;
}

button,
input {
  /*-webkit-appearance: none; */
  cursor: pointer;
}

hr {
    border-width: 1px 0 0 0;
    border-color: #767676;
    border-style: solid;
}

/*typography*/
h1, h2, h3, h4, h5, h6 {
    line-height: normal;
}

h1, h2, h3 {
    font-weight: normal;
    margin: .5em 0;
}

h4, h5, h6 {
    font-weight: bold;
}

h1 {
    font-size: 2.25em;
}

h2 {
    font-size: 1.875em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.125em
}

h5 {
    font-size: 1em;
}

h6 {
    font-size: .875em;
}

/*template*/
#wrapper .t-container-fluid {
    max-width: 100%;
}

#wrapper .RadButton {
    font-size: 1em;
}

#wrapper .RadMenu,
div.RadMenuPopup,
#wrapper .RadMenu_Default, #wrapper .RadMenu_Default a.rmLink  {
    font-size: 1em;
}


.positionGridRow {
    cursor: pointer;
}

.positionGridRow:hover {
    background-color: gray;
    color: white !important;
}

.menuseparator
{
    background-color: red !important;
}


.spanh2 {
    line-height: normal;
    font-weight: normal;
    margin: 1em 0;
    font-size: 1.35em;
}


.rgDetailTable, .rgMasterTable {
    width: 100%;
}

.ColumnOuterBox{
    border: 2px solid green;
}

 

and Mega.css

#menu-wrapper{margin:0 auto;width:100%;left: -250px}

#layer-wrapper{margin:0 auto; vertical-align:middle; text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: black;
}

/* Reset */
.nav,
.nav a,
.nav ul,
.nav li,
.nav div,
.nav form,
.nav input {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

.nav a { text-decoration: none; }

.nav li { list-style: none; }

/* Menu Container */
.nav {
    display: inline-block;
    position: relative;
    cursor: default;
    z-index: 500;
    width: 100%;
    /*background-color: lightblue;*/
}

/* the box for each menu*/
.MenuBox {
    z-index: 600;
}

/* Menu List */
.nav > li {
    display: block;
    float: left;
}

/* Menu Links */
    .nav > li > a {
        position: relative;
        display: block;
        z-index: 510;
        height: 30px;
        padding: 0 20px;
        line-height: 30px;
        width: 100px;
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 13px;
        color: #fcfcfc;
        text-shadow: 0 0 1px rgba(0,0,0,.35);
        background: #2c7800;
        border: 1px solid #0a3a01;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
        border-radius: 3px 3px 3px 3px;
    }

    .nav > li:hover > a {
        background: #3d9a00;
    }

    /*.nav > li:first-child > a {
    border-radius: 3px 3px 3px 3px;
    border-left: none;
    }

    .nav > li:last-child > a {
        border-radius: 3px 3px 3px 3px;
        border-left: none;
    }
        */


/* Menu Dropdown */
    .nav > li > div {
        position: absolute;
        display: block;
        width: 100%;
        top: 30px;
        left: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        border: 1px solid #0a3a01;
        background: #2c7800;
        border-radius: 0 0 3px 3px;
        -webkit-transition: all .3s ease .15s;
        -moz-transition: all .3s ease .15s;
        -o-transition: all .3s ease .15s;
        -ms-transition: all .3s ease .15s;
        transition: all .3s ease .15s;
    }

.nav > li:hover > div {
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

/* Menu Content Styles */
.nav .nav-column {
    float: left;
    width: 25%;
    padding: 1.5%;
}

.nav .nav-column-img-rt {
    float: right;
    vertical-align: central;
    padding: 1.5%;
}

.nav .nav-column-img-lt {
    float: left;
    width: 40%;
    vertical-align: central;
    padding: 1.5%;
}

.nav .nav-column h3 {
    margin: 20px 0 10px 0;
    line-height: 18px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #3d9a00;
    text-transform: uppercase;
}

.nav .nav-column h3.orange { color: #ff722b; }

.nav .nav-column li a {
    display: block;
    line-height: 26px;

    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ffffff;
}

.nav .nav-column li a:hover { color: #666666; }

.nav .nav-title {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    width: 95%;
    margin-top: 20px;
    margin-left: 1.5%;
}

.nav .imageblock {
display: block;
max-width: 300px;
max-height: 200px;
width: auto;
height: auto;
}

 

Thanks for any help you can give me!

 

Cory

[RAJAT]

and my web.config in case you need that too:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <appSettings>
    <add key="Telerik.Web.UI.RenderMode" value="lightweight" />
  <add key="Telerik.Skin" value="Office2010Silver" />
  <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />
  <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.6.1" />
    <sessionState timeout="120"></sessionState>
    <httpRuntime targetFramework="4.6.1" encoderType="System.Web.Security.AntiXss.AntiXssEncoder"/>
    <pages>
      <controls>
        <add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" />
      </controls>
    </pages>
    <httpHandlers>
      <add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" validate="false" />
      <add path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" validate="false" />
      <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false" />
      <add path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" validate="false" />
      <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false" />
    </httpHandlers>
  </system.web>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="X-UA-Compatible" value="IE=Edge" />
      </customHeaders>
    </httpProtocol>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <remove name="ChartImage_axd" />
      <add name="ChartImage_axd" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" preCondition="integratedMode" />
      <remove name="Telerik_Web_UI_SpellCheckHandler_axd" />
      <add name="Telerik_Web_UI_SpellCheckHandler_axd" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler" verb="*" preCondition="integratedMode" />
      <remove name="Telerik_Web_UI_DialogHandler_aspx" />
      <add name="Telerik_Web_UI_DialogHandler_aspx" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" preCondition="integratedMode" />
      <remove name="Telerik_RadUploadProgressHandler_ashx" />
      <add name="Telerik_RadUploadProgressHandler_ashx" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" preCondition="integratedMode" />
      <remove name="Telerik_Web_UI_WebResource_axd" />
      <add name="Telerik_Web_UI_WebResource_axd" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" preCondition="integratedMode" />
    </handlers>
  </system.webServer>

</configuration>

[Doncho]

Hi Cory,

Thank you for the code provided!

I have used it to test the scenario locally. On my side, it works as expected and the images are loaded with loading the page, see http://somup.com/cYijiEQdGT. The behavior is the same in IE 11 and in Edge.

I would suggest you check out the Improve Your Debugging Skills with Chrome DevTools blog post as it may prove helpful in troubleshooting the issue.

If it does not help in resolving the problem, please open a formal support ticket where we can investigate the problem in detail.

Kind regards,
Doncho
Progress Telerik

[RAJAT]

On delving much deeper into the developer tools I noticed the following...

when the screen originally displays, this is what the markup for the image on the button looks like:

 

<span class="rbIcon p-icon rbPrimaryIcon rbCustomIcon" style="top:3px;left:3px;width:30px;height:30px;background-image:url(%26#39;/images/Cancel.png');"></span>

Once I mouse over the image - and mouse off that same span changes to the following:

<span class="rbIcon p-icon rbPrimaryIcon rbCustomIcon" style="top: 3px; left: 3px; width: 30px; height: 30px; background-image: url(&quot;/images/Cancel.png&quot;);"></span>

so of course the original image doesn't display.

But you have my original build of the button:

<telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" Width="120px" Height="36px" OnClick="btnCancel_Click"
        RenderMode="Lightweight">
        <Icon PrimaryIconUrl="images/Cancel.png" PrimaryIconTop="3px" PrimaryIconLeft="3px" PrimaryIconWidth="30px" PrimaryIconHeight="30px"></Icon>
    </telerik:RadButton>

So I don't know what I can do about this - the markup generated by the telerik control appears to be incorrect.  Should I open a formal ticket on this one?

Thanks!

Cory

[Doncho]

Hi Cory,

I am afraid I was not able to reproduce the described behavior. I have tested different versions of Telerik Controls in different Browsers but to no avail.

One approach you can try is to work around the issue by overriding the background-image URL using CSS

<telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" Width="120px" Height="36px" OnClick="btnCancel_Click" CssClass="CancelButton"
    RenderMode="Lightweight">
    <Icon PrimaryIconUrl="images/Cancel.png" PrimaryIconTop="3px" PrimaryIconLeft="3px" PrimaryIconWidth="30px" PrimaryIconHeight="30px"></Icon>
</telerik:RadButton>

CSS

.RadButton.CancelButton .rbPrimaryIcon{
    background-image:url('images/Cancel.png') !important;
}

It would be helpful if you provide us a runnable sample so that we can experience the issue locally and be able to troubleshoot it.

Kind regards,
Doncho
Progress Telerik

[RAJAT]

The markup that I sent you was from the runable sample.  What I described is exactly how the sample behaves.  I can't upload the project to the forum as it isn't one of the allowed types but that is what it does.  If you have an alternate method, let me know here and I will send you the file however you like.

I will give the CSS markup method a try and see if I can make that way work.

Thanks
Cory

 

 

[RAJAT]

Using the CSS workaround worked perfectly.

 

Thanks for the help!

Cory

[James]

Thanks