代码之家  ›  专栏  ›  技术社区  ›  ewizard

在iOS上滑动时出现离子渲染问题

  •  5
  • ewizard  · 技术社区  · 7 年前

    All/Classes/Products 滞后于背景图像的消失(有没有办法使背景图像跟随滑动?)黄色加号也会移动大约 40px

    我的 ion-header HTML如下所示:

    <ion-header #ionheader (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')"> <!--[@slideDown]="downState"-->
      <ion-toolbar #clickme class="itemadspace" [@slideDown]="downState" no-padding> <!--[@slideDown]="downState"-->
        <!--<ion-item class="ad" no-padding no-lines>-->
        <div class="stylistview">
          <button class="stylistviewbutton" (tap)='switchView()' ion-button color="secondary">User View</button>
        </div>
    
        <!--</ion-item>-->
      </ion-toolbar>
    
      <div (tap)="loadPost()" class='pluscontainer' [@plusSlide]="downState">
        <ion-icon class='plussy' name="add"></ion-icon>
      </div>
    
      <div class="clickme" (tap)="toolClicked($event)">
        <ion-navbar  color="black" [@toolSlide]="toolbarState" id="iontoolbar"> <!--[@toolSlide]="toolbarState"-->
          <ion-icon class='custom-icon' name="play"></ion-icon>
          <button class="all toolbarstyle" #allF ion-button color="black" (tap)="all()">All</button>
          <button class="classes toolbarstyle" #classesFeed ion-button color="black" (tap)="products()">Classes</button>
          <button class="products toolbarstyle" #productsFeed ion-button color="black" (tap)="classes()">Products</button>
        </ion-navbar>
      </div>
    </ion-header>
    

    ion-toolbar {
            div.toolbar-background {
                background-image: url('../img/tresemme.png') !important;
            background-repeat: no-repeat;
                background-size: cover;
    
            }
        }
    
    .itemadspace {
            z-index: 1;
            top: 0;
            left: 0;
            text-align: center;
            height: 88px;
        }
    
    .pluscontainer {
            position: absolute;
            z-index: 2;
            right: 10px;
            top: 28px;
        }
    
    .plussy {
            font-size: 72px;
            font-weight: 700;
            color: map-get($colors, primary);
            /*position: relative;*/
        }
    
    .toolbarstyle {
            font-size: 12px;
            padding: 0 0.5em;
            color: gray;
            background-color: black;
        }
    
    #iontoolbar {
            z-index: 1;
            position: absolute;
            top: 88px;
            left: 0;
            background-color: black;
            color: white;
            border-bottom-style: solid;
            border-bottom-color: map-get($colors, primary);
            border-bottom-width: 4px;
        }
    

    非常感谢您的帮助,谢谢。

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  2
  •   Crashtor    7 年前

    这里的问题是 #iontoolbar pluscontainer具有CSS定位 absolute

    有时,在绝对和固定位置的元素上运行转换会导致元素看起来似乎落后。当它们筑巢时,会变得更加起伏不定。

    老实说,我不知道发生这种情况的确切原因,但根据我自己的经验,这在移动safari中是最糟糕的。我建议您对HTML和CSS结构进行一些调整。我的拙见中没有理由解释为什么这些元素应该 position: absolute; 虽然如此,但可以通过相对定位轻松完成。

    试试看,让我知道。