octicon-mirror(24/)
javascript/ionic-framework
octicon-rss(16/)
1
0
octicon-repo-forked(16/)Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 22:44:13 +08:00
octicon-code(16/) Code octicon-issue-opened(16/) Issues octicon-package(16/) Packages octicon-project(16/) Projects octicon-tag(16/) Releases octicon-book(16/) Wiki octicon-pulse(16/) Activity

fix(header): avoid flicker on ios when collapsing (#19850)

Browse Source 
fixes #19839
This commit is contained in:
octicon-git-branch(16/)
octicon-tag(16/)
Liam DeBeasi
2019-11-07 09:51:03 -05:00
committed by GitHub
gitea-unlock(16/)
parent cace1b357e
commit a3666ddf0c
octicon-diff(16/tw-mr-1) 1 changed files with 13 additions and 12 deletions
gitea-whitespace(16/)
gitea-split(16/)
octicon-kebab-horizontal(16/)
Download Patch File Download Diff File Expand all files Collapse all files

25
core/src/components/header/header.ios.scss
View File

@@ -56,18 +56,19 @@
transition: all 0.2s ease-in-out;
}
/**
* There is a bug in Safari where animating the opacity
* on an element in a scrollable container while scrolling
* causes the scroll position to jump to the top
*/
.header-collapse-condense ion-toolbar ion-title,
.header-collapse-condense ion-toolbar ion-buttons {
transition: none;
}
.header-collapse-condense-inactive ion-toolbar.in-toolbar ion-title,
.header-collapse-condense-inactive ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
opacity: 0;
pointer-events: none;
}
/**
* There is a bug in Safari where changing
* the opacity of an element in a scrollable container
* while rubber-banding causes the scroll position
* to jump to the top
*/
.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,
.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
visibility: hidden;
}