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

Add IE7-9 support #3

Merged
merged 1 commit into from
Aug 21, 2013
Merged

Add IE7-9 support #3

merged 1 commit into from
Aug 21, 2013

Conversation

markbao
Copy link
Contributor

@markbao markbao commented Aug 21, 2013

NProgress currently uses transform: translate3d() to move the bar around, which is only supported on IE10 (along with most modern browsers).

This fix sniffs whether the browser supports transform: translate3d(), and falls back to transform: translate() (IE9 and other non-3D-supporting browsers) or margin (IE7-8) if not.

  • Adds a new setting (positionUsing) which is populated the first time that NProgress.set() is called, which stores which positioning CSS rule to use.
  • positionUsing is populated using NProgress.getPositioningCSS(), which determines which positioning CSS rule to use (translate3d|translate|margin).
  • Changes NProgress.set() to call barPositionCSS(), which returns a hash of CSS to set on the bar. The positioning rule depends on what positionUsing is set to.

Sniffing code based heavily on Zynga/scroller IE8-9 support code:
pbakaus/scroller#4

Tested on:

  • IE7 on Windows XP
  • IE8 on Windows XP
  • IE8 on Windows 7
  • IE9 on Windows 7
  • IE10 on Windows 7
  • IE10 (Metro) on Windows 8
  • IE10 (Desktop) on Windows 8

This only adds support for the bar, not the spinner, and there's no animation present.

nprogress currently uses translate3d(), which is only supported on IE10 (along with most modern browsers).

This fix sniffs whether the browser supports translate3d(), and falls back to translate() (IE9 and other non-3D-supporting browsers) or margin (IE7-8) if not.

Adds a new setting (positionUsing) which is populated the first time that NProgress.set() is called, calling NProgress.getPositioningCSS() which determines which positioning CSS rule to use.

Changes NProgress.set() to call barPositionCSS() to determine what CSS to set on the bar (which uses positionUsing to determine whether it uses transform3d/transform/margin).

Sniffing code based heavily on Zynga/scroller IE8-9 support code:
pbakaus/scroller#4
@markbao markbao mentioned this pull request Aug 21, 2013
@lleger
Copy link

lleger commented Aug 21, 2013

Used this fork in a project just now and it works great in IE7-9 for me. Clean code, guys. 👍

@rstacruz
Copy link
Owner

Good job!

I just might backport (vendorPrefix + 'Perspective' in bodyStyle) into Transit too.

I'm going to blindly merge this in (heh) as it seems pretty clean, good, and builds are passing — will dig in further in a bit.

rstacruz added a commit that referenced this pull request Aug 21, 2013
@rstacruz rstacruz merged commit 3983097 into rstacruz:master Aug 21, 2013
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.

3 participants