-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix broken meters in IE #4914
Fix broken meters in IE #4914
Conversation
I thought we took care of all the style -> ng-style conversions, but apparently not. Looks good to me! |
4784660
to
695b00b
Compare
Rebased and bump, since this is a pretty significant issue. |
FYI, someone committed something in the last few days that has broken the travis ci build. Tracking down what it was, but the build failing doesn't mean there is anything wrong with your PR. |
K. Build is now passing on the develop branch. |
Health, XP, and Mana bars were broken in IE, due to the use of {{ }} within style attributes. Using Angular's string interpolation within style attributes doesn't work in IE, as IE will actually strip the property immediately upon DOM render. Using ng-style allows properties to be preserved, and renders cross-browser correctly.
w00t. Remerged and passing :) |
Eleven versions of IE and it's still a pain in the neck. Partial credit towards Tier 5. Thanks! |
Hah. We've run into issues with Spartan already at my day job. It never ends! 😢 |
Addresses #4876
The Issue
Health, XP, and Mana bars were broken in IE, due to the use of
{{ }}
withinstyle
properties. Using Angular's string interpolation withinstyle
propertiesdoesn't work in IE, as IE will actually strip the property immediately upon DOM
render. Thus, the bars were rendering with no width attribute, and showed as full.
Note: See angular/angular.js#2186 for further discussion of this issue
The Fix
Using
ng-style
allows properties to be preserved, and renderscross-browser correctly.
Screenshots after the
style
->ng-style
change (pulled from my local build) are provided for convenience:IE11
Chrome
Firefox