Skip to content
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

Merged
merged 1 commit into from
Apr 3, 2015
Merged

Fix broken meters in IE #4914

merged 1 commit into from
Apr 3, 2015

Conversation

gisikw
Copy link
Contributor

@gisikw gisikw commented Mar 25, 2015

Addresses #4876

The Issue

Health, XP, and Mana bars were broken in IE, due to the use of {{ }} within
style properties. Using Angular's string interpolation within style properties
doesn'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

Broken IE11

The Fix

Using ng-style allows properties to be preserved, and renders
cross-browser correctly.

Screenshots after the style -> ng-style change (pulled from my local build) are provided for convenience:

IE11

IE11

Chrome

Chrome

Firefox

Firefox

@crookedneighbor
Copy link
Contributor

I thought we took care of all the style -> ng-style conversions, but apparently not. Looks good to me!

@gisikw
Copy link
Contributor Author

gisikw commented Apr 2, 2015

Rebased and bump, since this is a pretty significant issue.

@crookedneighbor
Copy link
Contributor

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.

@crookedneighbor
Copy link
Contributor

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.
@gisikw
Copy link
Contributor Author

gisikw commented Apr 3, 2015

w00t. Remerged and passing :)

@Alys
Copy link
Contributor

Alys commented Apr 3, 2015

Eleven versions of IE and it's still a pain in the neck.

Partial credit towards Tier 5. Thanks!

Alys added a commit that referenced this pull request Apr 3, 2015
@Alys Alys merged commit 7a35793 into HabitRPG:develop Apr 3, 2015
@gisikw
Copy link
Contributor Author

gisikw commented Apr 3, 2015

Hah. We've run into issues with Spartan already at my day job. It never ends! 😢

@gisikw gisikw deleted the repair_ie_meters branch April 3, 2015 15:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants