Recently, I incorporated an animation into a design:
.map > img:hover {
-webkit-animation-name: MapFloatingChrome;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
...
to {-moz-transform: scale(0.9);}
}
The animation runs smoothly, but there's an issue when the page undergoes a partial postback triggered by a Refresh button, which results in an error being thrown in the console:
updateHeadStyles @ Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_ScriptManager1_TSM&compress=1&_TSM_CombinedS…:4597
...
(anonymous function) @ VM1634:2
b @ Telerik.Web.UI.WebResource.axd?_...
The specific 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);}'
It appears that the issue may be related to the percentage value (65%) in the CSS rules. So, my question now is: How can I adjust my CSS code to handle this situation even after partial postbacks?