ionic-team / ionic-team/ionic-framework

CSS4 box-shadow variable for toolbar-background

Open
#17,544 2 comments 2 reactions 0 assignees View on GitHub
package: core type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

# Feature Request
Please add a css4 box-shadow variable for ion-header ion-toolbar:last-child or ion-footer ion-toolbar:first-child.

**Ionic version:**
[x] **4.x**

**Describe the Feature Request**
Ionic 4 has no satisfying option to add a box-shadow to the header in iOS mode. Adding a box-shadow to the ion-toolbar or ion-header does not work, because it leaves an ugly navigation animation if the header is not the same size on the parent / child pages.

![ionic4-shadow-problem](https://user-images.githubusercontent.com/11189008/53091077-4cc1db80-3511-11e9-84c8-f511a6d37c23.gif)

**Describe Preferred Solution**
CSS4 box-shadow variable for ion-header ion-toolbar:last-child or ion-footer ion-toolbar:first-child. This was the fix for adding a good looking box-shadow to toolbars in Ionic 3 and is prevented with the new shadow DOM.

**Additional Context**
The solution given in https://github.com/ionic-team/ionic/issues/16895 does not fix the problem because then the navigation animation looks bad.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.