compatibilité partielle postback aux nombres dans les animations

Question

J'ai récemment ajouté une animation à une conception:

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

Cette animation fonctionne très bien, cependant, sur la page J'ai un bouton Actualiser qui fait un postback partiel, qui provoque une erreur dans la 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 

le message d'erreur est comme suit:

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);}'

Je suppose que le problème est avec le 65, donc ma question est: comment pourrais-je modifier mes règles CSS afin qu'ils puissent être manipulés même après des publications partielles?

Answer 1

Cette erreur provient généralement des commentaires CSS dans le <head> lorsque les contrôles RadAjax sont utilisés.

Puisque vous n'en avez aucun, je suppose que les symboles spéciaux (probablement le @) sont ce qui provoque l'échec de l'analyse de RadAjaxManager.

Pour résoudre ce problème, essayez:

• déplacer ces règles CSS à une feuille de style externe au lieu de ligne

• définissant la propriété EnablePageHeadUpdate du contrôle RadAjax à false.