javascript - Ionic 3 / Angular 5 / Chrome 移动设备上的绝对位置 + z-index 问题
问题描述
我正在做一个 Ionic 项目,我有一个页面,该页面在一周中的每一天显示水平滚动(离子幻灯片)中的项目。它还包含离子刷新。
我想在每个列表的顶部显示一个带有当天名称的标签,以便它与它重叠(在我的 css 中;位置:绝对 + 顶部:... + 左侧:... + z-index)。
当我提供我的项目并在我的计算机浏览器中查看它时,没问题,它工作正常。但是在我的 Android 设备上(通过浏览器或在编译的应用程序中访问我的开发服务器),会发生以下情况:无需向下滚动即可看到的标签是可以的 当我向下滚动查看其他日子时,标签显示在项目后面。当我点击一个标签时,它会“刷新”并正确显示,直到我再次滚动。当我拉离子刷新时,即使没有到达触发刷新功能的点,所有标签都会正确显示并保持正确显示。
我想这是 Angular 渲染的问题,但我无法找出哪个......
这是我的代码:
页面/主页/home.html
<ion-navbar>
<ion-title>Items</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<div *ngIf="productStatus == 'loaded'" class="productsContainer">
<day-products *ngFor="let day of weekdays" [products]="products[day.index]" [day]="day.longName"></day-products>
</div>
</ion-content>
页面/主页/home.ts
import { Component } from '@angular/core';
import { NavController, Refresher } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public weekdays = [
{ longName: "Monday", index: 0 },
{ longName: "Tuesday", index: 1 },
{ longName: "Wednesday", index: 2 },
{ longName: "Thursday", index: 3 },
{ longName: "Friday", index: 4 },
{ longName: "Saturday", index: 5 },
{ longName: "Sunday", index: 6 }
];
products: Array<any>
productStatus: string;
constructor(public navCtrl: NavController) {
this.products = new Array<any>();
this.productStatus = 'loading';
}
ionViewDidLoad() {
this.fillProductArray();
}
fillProductArray() {
this.productStatus = 'loading';
this.products = new Array<any>();
for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
let day = new Array<any>();
for (let productIndex = 0; productIndex < 5; productIndex++) {
day.push({
name: 'Item ' + productIndex,
description: 'Description for item ' + productIndex + ' of day number ' + dayIndex
});
}
this.products.push(day);
}
this.productStatus = 'loaded';
}
doRefresh(refresher: Refresher) {
this.fillProductArray();
refresher.complete();
}
}
页面/主页/home.module.ts
import { HomePage } from "./home";
import { NgModule } from "@angular/core";
import { IonicPageModule } from "ionic-angular";
import { DayProductsComponentModule } from "../../components/day-products/day-products.module";
@NgModule({
declarations: [HomePage],
imports: [
IonicPageModule.forChild(HomePage),
DayProductsComponentModule
]
})
export class HomePageModule {}
组件/day-products/day-products.html
<div class="wrapper">
<div class="day-name" ion-button #dayName>{{day}}</div>
<ion-slides centeredSlides="false" #slider>
<ion-slide *ngFor="let product of products">
<div class="card-container">
<ion-card class="scroll-item" #productCard>
<div class="image_wrapper">
<div class="image" [style.backgroundImage]="'url(http://placehold.it/500x500)'">
</div>
</div>
<ion-item class="product" text-wrap>
<h2>{{product.name}}</h2>
<p>{{product.description}}</p>
</ion-item>
</ion-card>
</div>
</ion-slide>
</ion-slides>
</div>
组件/day-products/day-products.scss
day-products {
.wrapper {
position: relative;
.day-name {
top: -16px;
left: 24px;
position: absolute;
width: 120px;
padding-top: 0;
z-index: 100;
}
ion-slides {
margin-top: 10px;
margin-bottom: 10px;
padding-top: 8px;
.swiper-slide {
height: auto;
width: 90%;
.slide-zoom {
height: 100%;
.card-container {
height: calc(100% - 10px);
ion-card {
margin-top: 0;
height: 100%;
display: inline-block;
.image_wrapper {
height: 150px;
width: 100%;
position: relative;
.image {
position: absolute;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: none;
}
}
}
}
}
}
.swiper-slide:only-child {
width: 100%;
}
}
}
}
组件/day-products/day-products.ts
import { Component, ViewChild, Input } from '@angular/core';
import { Slides } from "ionic-angular";
@Component({
selector: 'day-products',
templateUrl: 'day-products.html'
})
export class DayProductsComponent {
@Input()
day: string;
@Input()
products: Array<any>;
@ViewChild('slider') slider: Slides;
constructor() {
}
ngAfterViewInit() {
this.slider.freeMode = true;
this.slider.slidesPerView = 'auto';
}
}
组件/day-products/day-products.module.ts
import { NgModule } from "@angular/core";
import { DayProductsComponent } from "./day-products";
import { IonicModule, } from "ionic-angular";
@NgModule({
declarations: [DayProductsComponent],
imports: [
IonicModule
],
exports: [DayProductsComponent]
})
export class DayProductsComponentModule { }
包.json
{
"name": "horizontalScrollDemo",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/core": "4.4.0",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"@ionic/storage": "2.1.3",
"cordova-android": "7.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.2",
"cordova-plugin-ionic-webview": "^2.1.4",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "^5.5.7",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"@ionic/app-scripts": "3.1.8",
"typescript": "2.4.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
}
}
我真的很感激一些帮助!
编辑:
在我的设备上,在 Firefox 和本机浏览器(三星)中,标签按应有的方式显示。该问题似乎只出现在 Chrome (v. 69.0.3497.100) 中。在我的电脑上,在 Chrome 和 Firefox 中,显示效果很好。
解决方案
经过更多研究,我通过添加解决了这个问题
.day-name {
...
-webkit-transform: translateZ(0);
transform: translateZ(0);
...
}
如此处建议:https ://coderwall.com/p/gvbmbw/chrome-rendering-bug-elements-visibility-on-z-index
推荐阅读
- linux - 描述正在运行的 Linux 进程
- android - 选项卡布局中间选项卡不平滑滚动
- javascript - 这行代码在数组中找到最大元素,有人可以告诉我这段代码是如何使用reduce完成的吗?
- c - 我什么时候应该释放双指针?
- angular - MathJax 未定义角度 4
- c# - 如何在 rdlc 文件中使用表控件而不在 C# windows 窗体应用程序中使用任何数据库
- react-native - 意外使用保留字'import React-native
- oauth-2.0 - OpenIdConnect 的 id_token 是干什么用的?
- ruby-on-rails - 试图从 pdftables api 调用中保存 xml 文件
- netty - 理解 Netty 3 中 MemoryAwareThreadPoolExecutor 的行为