search

CodeByZach / pace

Automatically add a progress bar to your site.
https://codebyzach.github.io/pace/
MIT License
15.67k stars 1.9k forks source link

Barber Shop Theme is broken in FireFox #303

Open jfaquinojr opened 8 years ago

jfaquinojr commented 8 years ago

Barbershop fills the entire screen. It effectively becomes Fill Left.

ichan-akira commented 8 years ago

Yes, and Barber Shop theme (pace-theme-barber-shop.css) also fill entire screen for Internet Explorer 11 and Microsoft Edge for Windows 10 Mobile browser too (have tested this).

ichan-akira commented 8 years ago

To fix this, open the CSS theme file "pace-theme-barber-shop.css"

and add following line: height: 12px; for .pace .pace-progress and .pace .pace-activity.

So it will looks like:

.pace .pace-progress {
  background-color: #22df80;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 100%;
  height: 12px;
  overflow: hidden;
}

.pace .pace-activity {
  position: fixed;
  top: 0;
  right: -32px;
  bottom: 0;
  left: 0;
  height: 12px;

  ...
}
mshappe commented 8 years ago

For those of you who don't want to edit the distributed file in a package, you can simply add this to your own CSS:

.pace .pace-progress {
  height: 12px;
}

.pace .pace-activity {
  height: 12px;
}

I've tested this locally, and it solves the issue.