Android(Firefox)上的amp-carousel闪烁问题

时间:2018-08-31 13:29:17

标签: javascript html css3 amp-html accelerated-mobile-page

我曾经使用类型为“ slides”的放大器轮播。当我滑动转盘时,效果很好。但是刷卡后,当我单击箭头转到下一个轮播项目时,它会闪烁。刷卡后才出现此问题。

这是脚本:

  • 刷新浏览器
  • 滑动轮播(​​不要使用箭头)
  • 点击箭头以查看下一张幻灯片。
  • 结果)每次点击箭头时,轮播都会开始闪烁。

哪些浏览器受到影响? 在Andriod上使用Firefox。

哪个AMP版本受到影响? V0

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>illuminum Green Houses</title>
    <link rel="canonical" href="https://illuminumgreenhouses.com/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
    <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
    * {
        box-sizing: border-box;
    }
    a{
      text-decoration: none;
       color: #505050;
    }
    body{
      font-family: sans-serif;
      color: #505050;
      font-size: 14px;
      line-height: 20px;
    }
      .ampstart-headerbar {
          background-color: #fff;
          color: #000;
          z-index: 999;
          box-shadow: 0 0 5px 2px rgba(0,0,0,.1);
          height: 57px;
           padding: 7px 0;
      }
      .ampstart-navbar-trigger {
          line-height: 2.8rem;
          font-size: 2rem;
          float: left;
          margin-left: 12px;
          position: absolute;
      }
      .ampstart-sidebar {
          background-color: #fff;
          color: #000;
          min-width: 300px;
          width: 300px;
      }
      amp-sidebar[side=left] {
          left: 0;
          -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
      }
      amp-sidebar[side] {
          -webkit-transition: -webkit-transform 233ms cubic-bezier(0,0,.21,1);
          transition: -webkit-transform 233ms cubic-bezier(0,0,.21,1);
          transition: transform 233ms cubic-bezier(0,0,.21,1);
          transition: transform 233ms cubic-bezier(0,0,.21,1),-webkit-transform 233ms cubic-bezier(0,0,.21,1);
      }
      amp-sidebar[side][open] {
          -webkit-transform: translateX(0);
          transform: translateX(0);
      }
      .logo{
       margin: auto;
      display: block;
      }
      .logo img{
        width: 50%;
      }
      .doc-header{
        position: relative;
      }
      .banner-caption{
        position: absolute;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        color: #fff;
        text-align: center;
        width: 100%;
        padding: 10px 0;
      }
       .banner-caption span{
        font-size: 14px;
       }
      h1{
        font-size: 20px;
        margin-top: 5px;
        margin-bottom: 5px;
      }

      .content-section{
        padding: 30px 10px 40px;
        border: 1px solid #ECECEC;
      }
      .content-heading{
        text-align: center;
      }
      .content-section h2{
        color: #39B54A;
        font-size: 20px;
        text-transform: uppercase;
        margin-bottom: 0;
      }
      .heading-dots span{
        width: 4px;
        height: 4px;
        border-radius: 50%;
        margin: 0 3px;
        background: #603913;
        display: inline-block;
      }
      .content-desc{
       text-align: center;
      }
      .amp-carousel-button-next{
        right: 0;
      }
      .amp-carousel-button-prev{
        left: 0;
      }
      .box{
        height: 96%;
        width: 80%;      
        margin: auto;
        background: #FAF6F1;
        -webkit-box-shadow: 0px 0px 5px 1px rgba(224,224,224,1);
        -moz-box-shadow: 0px 0px 5px 1px rgba(224,224,224,1);
        box-shadow: 0px 0px 5px 1px rgba(224,224,224,1);
        text-align: center;
        padding: 10px;
      }
      .box h2{
        color: #232323;
        font-size: 16px;
        text-transform: none;
      }
      .view-all-link{
        text-align: center;
        padding-top: 20px;
      }
      .view-all-link a{
        color: #603913;
        text-decoration: underline;
      }
      @media (max-width:30rem) {
        /*for 480px*/
        .box{
           width: 70%;  
        }
         .impact-section .box{
          width: 75%;
        }
      }
      @media (min-width:48rem) {
        /*for 768x*/
      }
    </style>
    <script  custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>
  </head>
  <body>




  <!-- content-section - Services-->
  <div class="content-section">

    <div class="content-heading">
        <h2>Services</h2>
        <div class="heading-dots">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
    </div>
    <div class="content-desc">
      <p> Here are our services all tailored to your preference.</p>
    </div>

      <amp-carousel type="slides"  layout="fixed-height" width="auto"  height="140"  controls data-next-button-aria-label="Go to next slide"  data-previous-button-aria-label="Go to previous ide">
       
          <div class="box">
            <a href="">
               <h2> SOIL TESTS</h2>
               <p> 
                Test your soils before planting 
                for mineral content and
                pathological analysis.
              </p>
            </a>
          </div>   

          <div class="box">
            <a href="">
               <h2> PRE-SITE SURVEY</h2>
               <p> 
                Get a professional technician visit your farm and determine suitability.
              </p>
            </a>
          </div>   

          <div class="box">
            <a href="">
               <h2> GREENHOUSE CONSTRUCTION</h2>
               <p> 
                Construct affordable modern greenhouses.
              </p>
            </a>
          </div>   

              <div class="box">
            <a href="">
               <h2> AGRONOMIC SUPPORT</h2>
               <p> 
                Plant high value seeds and receive expert agronomic care with e-reports
              </p>
            </a>
          </div>   

              <div class="box">
            <a href="">
               <h2>DRIP IRRIGATION</h2>
               <p> 
               Farm all year round with high quality affordable drip irrigation kits.
              </p>
            </a>
          </div>   

              <div class="box">
            <a href="">
               <h2> SENSOR TECHNOLOGY</h2>
               <p> 
               Optimise operations and production in your farm with solar powered sensors
              </p>
            </a>
          </div>    

      </amp-carousel>

      <div class="view-all-link">
        <a href="#">View All Services</a>
      </div>
  

  </div>
  <!-- content-section - Services-->





  </body>
</html>

0 个答案:

没有答案