mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
66584b03d0
Issue number: resolves #27782 --------- <!-- 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. --> Ionic uses text-size-adjust to prevent browsers from resizing text in landscape mode in order to match native app behavior. However, WebKit only supports `-webkit-text-size-adjust`, so this fix never applied to iOS devices. https://caniuse.com/?search=text-size-adjust ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Add `-webkit-text-size-adjust` where we use `text-size-adjust` ## 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. --> **Landscape** | main | branch | | - | - | |  |  | **Portrait** (Should be no changes) | main | branch | | - | - | |  |  |
88 lines
1.7 KiB
SCSS
88 lines
1.7 KiB
SCSS
@import "../themes/ionic.globals";
|
|
@import "../themes/ionic.mixins";
|
|
|
|
|
|
// Structure
|
|
// --------------------------------------------------
|
|
// Adds structural css to the native html elements
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
|
|
text-size-adjust: 100%;
|
|
}
|
|
|
|
html:not(.hydrated) body {
|
|
display: none;
|
|
}
|
|
|
|
html.ion-ce body {
|
|
display: block;
|
|
}
|
|
|
|
html.plt-pwa {
|
|
height: 100vh;
|
|
}
|
|
|
|
body {
|
|
@include font-smoothing();
|
|
@include margin(0);
|
|
@include padding(0);
|
|
|
|
position: fixed;
|
|
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
|
|
/**
|
|
* Because body has position: fixed,
|
|
* it should be promoted to its own
|
|
* layer.
|
|
*
|
|
* WebKit does not always promote
|
|
* the body to its own layer on page
|
|
* load in Ionic apps. Once scrolling on
|
|
* ion-content starts, WebKit will promote
|
|
* body. Unfortunately, this causes a re-paint
|
|
* which results in scrolling being halted
|
|
* until the next user gesture.
|
|
*
|
|
* This impacts the Custom Elements build.
|
|
* The lazy loaded build causes the browser to
|
|
* re-paint during hydration which causes WebKit
|
|
* to promote body to its own layer.
|
|
* In the CE Build, this hydration does not
|
|
* happen, so the additional re-paint does not occur.
|
|
*/
|
|
transform: translateZ(0);
|
|
|
|
text-rendering: optimizeLegibility;
|
|
|
|
overflow: hidden;
|
|
|
|
touch-action: manipulation;
|
|
|
|
-webkit-user-drag: none;
|
|
|
|
-ms-content-zooming: none;
|
|
|
|
word-wrap: break-word;
|
|
|
|
overscroll-behavior-y: none;
|
|
-webkit-text-size-adjust: none;
|
|
|
|
text-size-adjust: none;
|
|
}
|