Issue number: resolves#21130
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
IonContent sets `--offset-top` and `--offset-bottom` variables to allow
the content to scroll under headers, footers, and tab bars. This is
essential to creating the translucency effect on these components.
IonContent does this by computing its offsetHeight and offsetTop
coordinates which take into account the dimensions of headers, footers,
and tab bars. Occasionally, this code will run before the IonTabBar has
been hydrated which means that the offset will be wrong because the
IonTabBar will have a dimension of 0x0 prior to hydration.
This impacts Ionic Angular devs who are using the lazy loaded build of
Ionic. React and Vue devs are not impacted because they are using the
dist-custom-elements build of Ionic which does not have hydration.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- IonContent will re-run the offset computation code whenever the
`ionTabBarLoaded` event is emitted. This event is emitted at most once
per IonTabBar instance.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.4.2-dev.11695831341.191bdf12`
Note: I did not write a test since this is fixing a race condition. I
wasn't able to find a non-flaky way of testing this. You can test this
in an Ionic Angular Tabs starter application with the dev build. The
`--offset-bottom` variable on `ion-content` should be large enough such
that the content will scroll under the tab bar. The translucency effect
won't work just yet, but that is being fixed in
https://github.com/ionic-team/ionic-framework/pull/28246.
Issue number: Resolves#27411,
https://github.com/ionic-team/stencil/issues/2429,
https://github.com/ionic-team/stencil/issues/4076
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Rendering `<ion-content fullscreen="true">` in an Angular Universal
project will result in a javascript heap exception and the browser tab
timing out.
`forceUpdate` is not a compatible API with pre-rendering and results in
calling itself indefinitely.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the fullscreen implementation of `ion-content` to only call
`forceUpdate` and related functionality when running in a browser
environment.
- `<ion-content fullscreen="true">` is compatible with Angular Universal
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev-build: `7.0.6-dev.11683653232.1ddc5840` ✅
The Ionic Framework team would like to re-evaluate our approach to improving customization options when building mobile applications. We are looking at other solutions that a) make customizing an app UI easier and b) are applicable to a broader set of developers.
* fix(content): change main child element to div when parent is menu
* fix(content): change main child element to div when parent is menu, popover, or modal
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
* fix(content): make closest element detector unreactive
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
- removes mode-less component classes from the internal CSS, use element instead
- adds mode specific classes `md` or `ios` for styling inside of shadow components
- adds e2e test that verifies mode classes exist on all ionic components, plus checks for specific classes that the components need for internal styling
fixes#17608
