为什么Firefox，Safari和Chrome之间的滚动不一致？

时间：2016-01-17 19:03:38

标签： javascript css angularjs angular-ui-bootstrap

我正在http://helpir-staging.herokuapp.com的这个网页上工作。它并不完美，但它在Safari上滚动得很好。在Firefox中它只使用箭头键滚动（没有鼠标滚动），而在Chrome中我根本不会得到任何滚动。

我的CSS中肯定存在可怕的错误。任何帮助都会非常感激。

我使用bootstrap，bootcards，angularjs和angular-dynamic-layout。

app.scss：

$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";

$hero-image: "../assets/images/slider.jpg";

@import '../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
@import '../bower_components/bootstrap-social/bootstrap-social.scss';
$fa-font-path: "../bower_components/font-awesome/fonts";
@import '../bower_components/font-awesome/scss/font-awesome';

// App-wide Styles

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

// KAREL CSS

$heynay-background: #FAFAFA;
$heynay-peach: #f27949;
$helpir-gray: rgba(255,255,255,0.5);

html, body {
   height: 100%;
   width: 100%;
//   background-color: blue;
}

h1 {
  font-size: 2em;
}

p {
  font-size: 0.85em;
}

hr {
  display: none;
}

body {
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}

.alert {
  margin: 10px 0px;
}

.margined {
  margin: 5px;
}

.navbar-default,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-text
{
  color: #eeeeee;
  background-color: transparent;
}

.footer > p,
.footer > p > a,
{
  color: #888888;
  background-color: transparent;  
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>li>a.active,
.navbar-default .navbar-nav>li>a:focus ,
.navbar-default .navbar-nav>li>a>p.active ,
.navbar-default .navbar-nav>li>a>p:focus {
  border-radius: 3px;
  color: #111111;
  background-color: $helpir-gray;
 }

#profile-button {
  margin: 0px;
  padding: 12px 5px;
  height: 50px;
}

#profile-button:hover,
#profile-button.active {
  border-radius: 3px;
  color: white;
  background-color: $heynay-peach;
}

.navbar-default .navbar-nav>li>a>p {
  color: white;
  background: none;
  margin: 0px;
  padding: 0px;
}

.navbar-default .navbar-nav>li>a>p>img {
  height: 30px;
  width: 30px;
  padding: 3px;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: white;
}

.btn-default {
  color: #000;
  background-color: $heynay-peach;
}

.btn-default {
  color: #f00;
  background-color: $heynay-peach;
}

.btn-default[disabled] {
  background-color: #9B9B9B;
}

.btn-default:hover {
  background-color: $heynay-background;
  color: white;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 0px solid transparent;
  border-radius: 4px;
}

.icon-brand {
  color: $heynay-background;
}

.heynay-legal {
  text-align: left;
}

.panel-default > .panel-heading {
  background: $heynay-background;
}

.panel-title > a,
.panel-title > a {
  text-decoration: none;
  color: white;
}

.panel-title > a:hover,
.panel-title > a.active {
  text-decoration: none;
  color: black;
}

[ng-click],
[data-ng-click],
[x-ng-click] {
    cursor: pointer;
}




// GLOBAL STYLES



footer {
  height: 60px;
  text-align: center;
  background-color: $heynay-background;
  padding-top:20px;
  padding-bottom:20px;
  font-size: 0.8em;
}


#heynay-logo {
  font-size: 25px;
  color: #000000;
}

.navbar-toggle {
  background-color: $heynay-peach;
  border-color: transparent;
}

.desktop-footer {
  display : none;
}

.mobile-footer {
  display : inline;
}


// not sure if tyhis is used.
.general-section {
  text-align: left;
  padding: 50px 10px;
  min-height: 75%;
  font-size: 0.9em;
}

.floating-pane-holder {
  display: none;
  z-index:1000;
  color: white;
  background-color: $heynay-peach;
  position: fixed;
  height: 50px;
  width: 90px;
  top: 100px;
  left: 48%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.floating-pane-content {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  position: absolute;
}

@media(min-width: 450px) {

  .navbar-default,
  .navbar-default .navbar-nav>li>a,
  .footer > p,
  .footer > p > a
  .navbar-default .navbar-nav>.active>a,
  .navbar-default .navbar-nav>.active>a:focus,
  .navbar-default .navbar-nav>.active>a:hover {
    font-size: 0.95em;
    border-color: transparent;
  }

  h1 {
    font-size: 3em;
  }

  p {
    font-size: 1em;
  }

  hr {
    display: block;
  }
}

@media(min-width:1000px) {
  .navbar-default,
  .navbar-default .navbar-nav>li>a,
  .footer > p,
  .footer > p > a
  .navbar-default .navbar-nav>.active>a,
  .navbar-default .navbar-nav>.active>a:focus,
  .navbar-default .navbar-nav>.active>a:hover {
    font-size: 1em;
    border-color: transparent;
  }

  #heynay-logo {
    font-size: 35px;
  }
}

// TABLES

.desktop-table {
  display : none;
}
.mobile-table {
  display : inline;
}

// TABLES END

// MODAL BEGIN

.ngdialog.ngdialog-theme-default 
.ngdialog-content {
  width: 700px;
}

// MODAL END


@media(min-width:750px) {

  .navbar {
    padding: 20px 0;
    background-color: transparent;
    -webkit-transition: background .35s ease-in-out,padding .5s ease-in;
    -moz-transition: background .35s ease-in-out,padding .5s ease-in;
    transition: background .35s ease-in-out,padding .5s ease-in;
    border-color: transparent;
  }

  .desktop-footer {
    display : inline;
  }

  .mobile-footer {
    display : none;
  }

  .top-nav-collapse {
    padding: 0;
    background-color: $heynay-background;
  }

  footer {
    height: 60px;
    font-size: 1em;
    bottom:0;
    height:2em;
  }

  .general-section {
    padding: 100px 10px;
    font-size: 1em;
  }

  .navbar-default .navbar-nav>li>p {
    padding: 15px; 
    margin: 0px;
    border-color: transparent;
  }
}

@media(min-width: 900px) {

  .desktop-table {
    display : inline;
  }

  .floating-pane-holder {
    top: 150px;
    left: 10px;
    transform: none;
    -webkit-transform: none;
  }

  .mobile-table {
    display : none;
  }
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}


// SPINNER

.spinner {
  margin: 100px auto 0;
  margin-bottom: 100px;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: $heynay-background;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  // Prevent first frame from flickering when animation starts
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

// Component styles are injected through grunt
// injector
@import 'admin/admin.scss';
@import 'main/main.scss';
@import '../components/category-tile/category-tile.scss';
@import '../components/footer/footer.scss';
@import '../components/modal/modal.scss';
@import '../components/oauth-buttons/oauth-buttons.scss';
// endinjector

类别的tile.css 

// dynamic layout bits...

@media (min-width: 1000px) {
  [dynamic-layout] {
    width: 1000px;
    margin-top: 25px;
  }
  .dynanamic-layout-col-4 {
    width: 250px;
    margin-top: 20px;
  }
  .dynamic-layout-col-8 {
    width: 500px;
  }
}

@media (min-width: 900px) {
      [dynamic-layout]{
        width: 900px;
        margin-top: 20px;
      }
      .dynamic-layout-col-4{
        width : 300px;
      }
      .dynamic-layout-col-8{
        width : 600px;
      }
}

@media (min-width: 600px) and (max-width: 900px){
  [dynamic-layout]{
    width: 600px;
    margin-top: 8px;

  }
  .dynamic-layout-col-4{
    width : 300px;
  }
  .dynamic-layout-col-8{
    width : 600px;
  }
}

@media (max-width: 600px){
  [dynamic-layout]{
    width: 300px;
    margin-top: 6px;

  }
  .dynamic-layout-col-4{
    width : 300px;
  }
  .dynamic-layout-col-8{
    width : 300px;
  }
}

.dynamic-layout-item {
  padding: 10px;
  width: auto;
}

.move-items-animation{
  transition-property: left, top;
  transition-duration: .25s;
  transition-timing-function: ease-in-out;
}

.dynamic-layout-item-parent.ng-enter{
  transition: .25s ease-in-out;
  opacity:0;
}
.dynamic-layout-item-parent.ng-enter.ng-enter-active{
  opacity:1;
}

.dynamic-layout-item-parent.ng-leave{
  transition: .5s ease-in-out;
  opacity:1;
}
.dynamic-layout-item-parent.ng-leave.ng-leave-active{
  opacity:0;
}

[dynamic-layout]{
 // float: left;
  position: absolute;
//  overflow: hidden;
//  height: 1000px;
}

.container-fluid{
  position: absolute;
  left:   50%;
  transform: translate(-50%);
  height:auto;
}

.title {
//  margin-bottom: 50px;
}

的main.css 

.thing-form {
  margin: 20px 0;
}

#banner {
  border-bottom: none;
  margin-top: -45px;
}

#banner h1 {
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1px;
}

.hero-unit {
  background-image: url("#{$hero-image}");
  position: relative;
#  padding: 30px 15px;
  color: #F5F5F5;
#  background: #4393B9;
  background-size:cover;
  background-repeat: no-repeat;
  color: #fff;
  cursor: default;
  padding: 1em 0 0 0;
}

.header-text {
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  cursor: default;
  position: relative;
}

.navbar-text {
  margin-left: 15px;
}


.privacy-terms {
  margin-top: 75px;
}

.support-section {
  padding-top: 150px;
  text-align: center;
  min-height: 85%;
}

@media(min-width: 400px) {
  .intro-section {
 //   background: url("#{$hero-image}") no-repeat 98% 30%;
  }
}

@media(min-width: 750px) {
  .intro-section {
    padding-top: 150px;
  }
}

1 个答案:

答案 0 :(得分：2)

您的脚本供应商（idk是什么）正在打破它，在检查中的chrome中我看到了：

body, html {
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

将隐藏更改为可见，它起作用，至少在chrome中。在修复供应商脚本和css属性后初始化您的自定义css文件。

相关问题
最新问题