You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/api/accordion.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -190,11 +190,11 @@ When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard sup
190
190
191
191
The accordion animation works by knowing the height of the `content` slot when the animation starts. The accordion expects that this height will remain consistent throughout the animation. As a result, developers should avoid performing any operation that may change the height of the content during the animation.
192
192
193
-
For example, using [ion-img](./img)may cause layout shifts as it lazily loads images. This means that as the animation plays, `ion-img` will load the image data, and the dimensions of `ion-img` will change to account for the loaded image data. This can result in the height of the `content` slot changing. Developers have a few options for avoiding this:
193
+
For example, lazily loading images may cause layout shifts as they load. As the animation plays, a lazily loaded image (such as a native `<img>` with `loading="lazy"`) loads its data and changes its dimensions to fit, which can change the height of the `content` slot. Developers have a few options for avoiding this:
194
194
195
-
1.Use an `img` element without any lazy loading. `ion-img` always uses lazy loading, but `img` does not use lazy loading by default. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading.
195
+
1.Load images eagerly by omitting `loading="lazy"`. An `<img>` does not lazy load by default, so the image loads up front instead of during the animation. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading.
196
196
197
-
2.Set a minimum width and height on `ion-img`. If you need to use lazy loading and know the dimensions of the images ahead of time (such as if you are loading icons of the same size), you can set the `ion-img` to have a minimum width or height using CSS. This gives developers the benefit of lazy loading while avoiding layout shifts. This works when using an `img` element with `loading="lazy"` too!
197
+
2.Reserve space for the image ahead of time. If you need lazy loading and know the dimensions of the images (such as loading icons of the same size), set a width and height on the `<img>` using its attributes or CSS. This gives you the benefit of lazy loading while avoiding layout shifts.
198
198
199
199
3. If neither of these options are applicable, developers may want to consider disabling animations altogether by using the `animated` property on [ion-accordion-group](./accordion-group).
Copy file name to clipboardExpand all lines: docs/api/img.md
+5-2Lines changed: 5 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,13 +11,16 @@ import Slots from '@ionic-internal/component-api/v9/img/slots.md';
11
11
12
12
<head>
13
13
<title>ion-img: Img Tag to Lazy Load Images in Viewport</title>
14
-
<metaname="description"content="Img tag lazy loads images whenever the tag is in the viewport. Utilize this component when generating large lists—as images are only loaded when visible." />
14
+
<metaname="description"content="The ion-img component lazily loads images as they enter the viewport. It is deprecated in favor of a native img tag with lazy loading." />
15
15
</head>
16
16
17
17
import EncapsulationPill from '@components/page/api/EncapsulationPill';
18
18
19
19
<EncapsulationPilltype="shadow" />
20
20
21
+
:::warning Deprecated
22
+
`ion-img` is deprecated and will be removed in Ionic 10. Use a native `<img>` tag with [loading="lazy"](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading) instead. Refer to the [migration guide](../updating/9-0.md#img) for details on replacing events and styling.
23
+
:::
21
24
22
25
Img is a tag that will lazily load an image whenever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browsers, but falls back to a `setTimeout` when it is not supported.
23
26
@@ -43,4 +46,4 @@ import Basic from '@site/static/usage/v9/img/basic/index.md';
Copy file name to clipboardExpand all lines: docs/updating/9-0.md
+53Lines changed: 53 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -411,6 +411,23 @@ The `exports` field defines the supported public entry points, and imports of pa
411
411
412
412
Apps on `moduleResolution: "node"` (classic) and webpack 4 keep resolving through the legacy fields and need no changes.
413
413
414
+
## Required Changes
415
+
416
+
### Browser Support
417
+
418
+
The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support) to ensure you are deploying apps to supported browsers.
419
+
420
+
If you have a `browserslist` or `.browserslistrc` file, update it with the following content:
421
+
422
+
```
423
+
Chrome >=89
424
+
ChromeAndroid >=89
425
+
Firefox >=75
426
+
Edge >=89
427
+
Safari >=16
428
+
iOS >=16
429
+
```
430
+
414
431
### Legacy Picker
415
432
416
433
1. Remove any usages of the `ion-picker-legacy` and `ion-picker-legacy-column` components. These components have been removed in Ionic 9. The recommended path forward is to use `ion-picker` inside a modal. Review the [Picker in Modal documentation](../api/picker.md#picker-in-modal) for more information.
@@ -423,6 +440,42 @@ The `ionChange` event on `ion-select` now only fires when the value changes. Pre
423
440
424
441
If your code relied on `ionChange` firing on every confirmation (for example, to detect that the user closed the overlay without changing anything), listen for `ionDismiss` instead, or use the `didDismiss` event on the underlying alert or action sheet.
425
442
443
+
### Img
444
+
445
+
`ion-img` is deprecated and will be removed in Ionic 10. The component was created to lazy-load images before browsers supported lazy loading natively. Modern browsers now support the [`loading="lazy"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading) attribute on the native `<img>` element, so the component is no longer needed.
446
+
447
+
Replace `ion-img` with a native `<img>` tag. Add `loading="lazy"` for lazy loading, and `decoding="async"` to match the asynchronous decoding `ion-img` applied by default. The `alt` and `src` properties map directly to the native attributes of the same name:
|`ionImgWillLoad`| No native equivalent. This fired when the image scrolled into view and lazy loading began. With native `loading="lazy"` the browser handles this internally. To know when an image is about to enter the viewport, use an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver). |
¹ Native `load` and `error` do not bubble, while the Ionic events did. If you used event delegation (one listener on a parent), listen on each `<img>` instead, or use the capture phase: `parent.addEventListener('load', handler, true)`.
465
+
466
+
#### Styling
467
+
468
+
`ion-img` exposed an `image` CSS shadow part for styling the inner image. With a native `<img>`, style the element directly instead:
469
+
470
+
```diff
471
+
- ion-img::part(image) {
472
+
- border-radius: 8px;
473
+
- }
474
+
+ img {
475
+
+ border-radius: 8px;
476
+
+ }
477
+
```
478
+
426
479
### Input
427
480
428
481
The `autocorrect` property on `ion-input` is now a `boolean` (default `false`) instead of `'on' | 'off'`. Because the attribute coerces to `true` for any value other than the string `"false"`, `autocorrect="off"` now enables autocorrect.
0 commit comments