CODEWITHSUNDEEP
cssasp.nettelerikpartial-postback
Lajos Arpad
Lajos Arpad

Reputation: 77045

Partial postback compatibility to numbers in animations

I have recently added an animation to a design:

    .map > img:hover {
        -webkit-animation-name: MapFloatingChrome;
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-name: MapFloatingFF;
        -moz-animation-duration: 3s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: ease-in-out;
    }

    @-webkit-keyframes MapFloatingChrome {
        from {-webkit-transform:translate(0, 0px);}
        65% {-webkit-transform:translate(0, -5px);}
        to {-webkit-transform: translate(0, 0px);}    
    }

    @-moz-keyframes MapFloatingFF {
        from {-moz-transform:translate(0, 0px);}
        65% {-moz-transform:translate(0, -5px);}
        to {-moz-transform: translate(0, 0px);}    
    }

    .grid > img:hover {
        -webkit-animation-name: GridScaleChrome;
        -webkit-animation-duration:3s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:ease-in-out;
        -moz-animation-name: GridScaleFF;
        -moz-animation-duration:3s;
        -moz-animation-iteration-count:infinite;
        -moz-animation-timing-function:ease-in-out;
    }

    @-webkit-keyframes GridScaleChrome {
        from {-webkit-transform: scale(0.9);}
        65% {-webkit-transform: scale(1.2);}
        to {-webkit-transform: scale(0.9);}    
    }

    @-moz-keyframes GridScaleFF{
        from {-moz-transform: scale(0.9);}
        65% {-moz-transform: scale(1.2);}
        to {-moz-transform: scale(0.9);}    
    }

This animation works very nicely, however, on the page I have a Refresh button which does a partial postback, which causes an error in the console:

updateHeadStyles    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:4597
set_styles  @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:4398
Sys$Component$_setProperties    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
Sys.Component.create    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
(anonymous function)    @   VM1634:2
add_init    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
(anonymous function)    @   VM1634:1
_loadScriptsInternal    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
_loadScriptsInternal    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
_loadScriptsInternal    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
_nextSession    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
_loadScriptsInternal    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
_scriptLoadedHandler    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:15
(anonymous function)    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
_scriptLoadHandler  @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
(anonymous function)    @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6
b   @   Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:6

The error message is as follows:

Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:4597 Uncaught SyntaxError: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule ' 65% {-webkit-transform:translate(0, -5px);}'

My guess is that the problem is with the 65, so my question is: how could I modify my CSS rules so that they can be handled even after partial postbacks?

Upvotes: 2

Views: 107

Answers (1)

rdmptn
rdmptn

Reputation: 5611

This error usually comes from CSS comments in the <head> when RadAjax controls are used.

Since you have none, I suppose the special symbols (likely the @) is what causes the parsing RadAjaxManager does to fail.

To fix it, try:

  • moving these CSS rules to an external stylesheet instead of inline

  • setting the EnablePageHeadUpdate property of the RadAjax control to false .

Upvotes: 0

Related Questions