Effet de bord de défilement SwiftUI : soft ou hard, et le changement d'iOS 27

Recompilez une app avec Xcode 27 et ses barres de navigation peuvent soudain changer d'apparence. Là où le contenu s'estompait doucement sous la barre d'outils, on voit désormais une ligne nette et une bande plus opaque. Rien n'a changé dans votre code. Ce qui a changé, c'est l'effet de bord de défilement (scroll edge effect) par défaut en SwiftUI, le traitement qu'iOS applique là où le contenu qui défile rencontre une barre.

Ce guide explique ce qu'est l'effet de bord de défilement, en quoi .soft et .hard diffèrent, ce qui a changé entre iOS 26 et iOS 27, et comment choisir le rendu voulu en SwiftUI et en UIKit. Il s'appuie sur la documentation d'Apple et les sessions de la WWDC25, sur la réponse d'un ingénieur d'Apple sur les forums développeurs et sur les signalements de développeurs, dont @sarunw. Le changement d'iOS 27 ne figure pas dans les notes de version d'Apple : considérez-le comme un comportement observé, susceptible d'évoluer d'une version à l'autre.

Qu'est-ce que l'effet de bord de défilement en SwiftUI ?

L'effet de bord de défilement est arrivé dans iOS 26 avec Liquid Glass. Les barres d'outils ne reposent plus sur un fond opaque ; leurs éléments flottent au-dessus de votre contenu. Pour que ces éléments restent lisibles, le système traite le contenu qui défile en dessous. La session Build a SwiftUI app with the new design de la WWDC25 le décrit comme un léger effet de flou et de fondu appliqué au contenu situé sous les barres d'outils système.

Vous l'obtenez automatiquement sous les barres système. Apple vous demande de retirer les arrière-plans ou calques d'assombrissement que vous aviez placés derrière les éléments de barre, car ils perturbent l'effet. Les barres personnalisées peuvent aussi en profiter : safeAreaBar(edge:alignment:spacing:content:), nouveau dans iOS 26, affiche du contenu comme une barre personnalisée à côté d'une vue, et les scroll views situées dessous reçoivent un effet de bord comparable à celui d'une barre système.

Vous contrôlez l'effet avec scrollEdgeEffectStyle(_:for:), également nouveau dans iOS 26. Il s'applique aux scroll views situées n'importe où dans la vue modifiée : vous pouvez donc le définir sur un conteneur plutôt que sur chaque scroll view.

Quelle est la différence entre .soft et .hard ?

ScrollEdgeEffectStyle a trois valeurs. Apple les définit ainsi :

L'exemple d'interface dense donné par Apple est l'app Calendrier. Dans la version UIKit de la session, Apple indique que le style hard ressemble aux arrière-plans de barre standard d'iOS 18. Voici l'exemple de la session SwiftUI :

ScrollView {
    // content
}
.scrollEdgeEffectStyle(.hard, for: .top)

Pourquoi l'effet de bord de défilement a-t-il changé sous iOS 27 ?

Deux choses ont changé, et il est facile de les confondre.

La valeur par défaut a changé. @sarunw le résume : sous iOS 26, l'effet de bord de défilement par défaut est .soft ; sous iOS 27, il est .hard. Des développeurs ont constaté la même chose dans leurs apps. Le projet Shellbee a ouvert un bug quand les barres de toute son app sont devenues plates après un build iOS 27, et DevelopersIO a constaté la même chose pour une safeAreaBar personnalisée. À strictement parler, la valeur par défaut reste .automatic ; c'est sa résolution qui a changé. DevelopersIO rapporte aussi qu'une app compilée avec Xcode 26.6 et exécutée sous iOS 27 a conservé l'ancien rendu : le changement dépend donc du SDK utilisé pour compiler. L'auteur n'en a trouvé aucune mention dans les notes de version d'iOS 27 ni d'Xcode 27.

Les styles eux-mêmes ont changé. @sarunw note que .hard n'est pas identique sur les deux versions. Sous iOS 26, c'est presque une barre pleine, et le texte situé derrière est illisible. Sous iOS 27, la ligne de coupure demeure, mais le contenu reste visible au travers. En mode sombre, il décrit la même différence : .soft estompe, .hard tranche, et le style d'iOS 27 est plus équilibré. Apple a aussi modifié .soft. Sur les forums développeurs, un ingénieur d'Apple a écrit que le style .soft a considérablement changé dans iOS 27.

Pourquoi ce changement ? Apple ne l'a pas expliqué publiquement. La même réponse sur le forum note que de nombreuses apps ont choisi .soft explicitement là où .automatic aurait été plus approprié, et que .soft n'est pas la valeur par défaut du système.

Comment retrouver le fondu d'iOS 26 sous iOS 27 ?

Si votre design dépend du fondu, demandez-le explicitement. La solution de @sarunw tient en un modificateur :

List(items) { item in
    ItemRow(item: item)
}
.scrollEdgeEffectStyle(.soft, for: .top)

Si vous prenez encore en charge des versions antérieures à iOS 26, enveloppez-le dans un test de disponibilité pour pouvoir l'appliquer partout en un seul appel :

extension View {
    @ViewBuilder
    func softTopScrollEdge() -> some View {
        if #available(iOS 26.0, *) {
            scrollEdgeEffectStyle(.soft, for: .top)
        } else {
            self
        }
    }
}

Trois réserves. D'abord, le correctif de Shellbee note qu'un style défini à la racine de l'app n'atteignait pas les NavigationStack présentées en feuille ou en plein écran : appliquez-le donc dans chacune. Ensuite, le « retour » n'est pas exact : .soft ayant été repensé dans iOS 27, vous obtenez le rendu soft d'iOS 27, pas une copie au pixel près d'iOS 26. Enfin, l'ingénieur d'Apple recommande .automatic partout où il répond à vos besoins de design, et souligne que .soft ne convient pas forcément à tous les designs.

Il y a aussi eu un bug de compatibilité. Un fil des forums développeurs signalait que .soft s'affichait complètement transparent au-dessus d'une safeAreaBar dans les bêtas d'iOS 27, mais uniquement dans les apps compilées avec le SDK iOS 26. Apple a indiqué qu'iOS 27.2 rendrait le nouveau .soft disponible pour ces apps, et un message ultérieur du fil le signale corrigé dans iOS 27.2 bêta 4. Si vous distribuez un build lié à iOS 26, vérifiez-le sous iOS 27.2.

Comment définir ou masquer l'effet de bord de défilement pour un seul bord ?

Le second paramètre de scrollEdgeEffectStyle(_:for:) est un Edge.Set : vous choisissez donc les bords auxquels s'applique un style, un seul, plusieurs ou .all. Le correctif de DevelopersIO pour sa barre inférieure personnalisée ne cible que ce bord :

ScrollView {
    DayList()
}
.scrollEdgeEffectStyle(.soft, for: .bottom)
.safeAreaBar(edge: .bottom) {
    DayPicker()
}

L'auteur note que le modificateur peut se placer sur une vue extérieure qui enveloppe la scroll view, comme ici.

Pour supprimer l'effet, utilisez scrollEdgeEffectHidden(_:for:), nouveau dans iOS 26. Ses deux paramètres ont des valeurs par défaut, si bien que le modificateur seul masque tous les bords :

ScrollView {
    PhotoGrid()
}
.scrollEdgeEffectHidden(true, for: .bottom)

Ne le masquez que si rien d'épinglé ne se trouve sur ce bord, ou si votre propre design garantit déjà la lisibilité des commandes. Sinon, des boutons en verre se retrouvent au-dessus d'un contenu non traité.

Comment modifier l'effet de bord de défilement en UIKit ?

UIKit suit le même modèle, lui aussi nouveau dans iOS 26. Chaque UIScrollView expose topEdgeEffect, bottomEdgeEffect, leftEdgeEffect et rightEdgeEffect. Chacune est un UIScrollEdgeEffect doté d'un style .automatic, .soft ou .hard, et d'un indicateur isHidden qui vaut false par défaut.

tableView.topEdgeEffect.style = .soft
collectionView.bottomEdgeEffect.isHidden = true

Pour vos propres vues placées sur le bord d'une scroll view, comme une rangée de boutons, la session Build a UIKit app with the new design d'Apple utilise UIScrollEdgeElementContainerInteraction. Les descendants du conteneur, comme les libellés, images et commandes, façonnent alors l'effet de bord.

let interaction = UIScrollEdgeElementContainerInteraction()
interaction.scrollView = scrollView
interaction.edge = .bottom
buttonContainer.addInteraction(interaction)

La plupart des signalements du changement de valeur par défaut d'iOS 27 viennent de projets SwiftUI, et le fil de forum cité plus haut inclut un développeur UIKit touché par le bug de .soft. Vérifiez donc aussi vos écrans UIKit sous iOS 27 au lieu de supposer qu'ils ne sont pas concernés.

Comment l'effet de bord de défilement fonctionne-t-il avec la barre verticale de l'iPhone Duo ?

Sur iPhone Duo, les apps compilées avec le SDK iOS 27.1 placent les éléments de navigation et de barre d'outils dans une barre verticale le long d'un bord latéral. Le Tech Talk Raise the bar with iPhone Duo d'Apple indique qu'une barre verticale n'a pas d'effet de bord de défilement par défaut, comme les barres horizontales, et qu'elle reçoit un arrière-plan quand Réduire la transparence est activé. Apple vous demande de garder lisibles les vues personnalisées de la barre dans les deux cas. Notre guide de la barre d'outils verticale de l'iPhone Duo explique quand les barres passent à la verticale.

Apple ne documente pas l'interaction entre scrollEdgeEffectStyle avec .leading ou .trailing et la barre verticale : ne bâtissez donc rien sur des suppositions. En portrait, l'écran intérieur garde des barres horizontales ; un style défini pour .top compte donc sur le même appareil qui affiche une barre verticale en paysage. Vérifiez les deux orientations, et tenez le contenu à l'écart de la barre grâce aux bonnes safe areas et marges de contenu.

Ce qu'il faut retenir

• L'effet de bord de défilement, nouveau dans iOS 26, garde les barres Liquid Glass lisibles au-dessus du contenu qui défile. Définissez-le avec scrollEdgeEffectStyle(_:for:) et masquez-le avec scrollEdgeEffectHidden(_:for:).
• .soft est une limite floutée et .hard une limite presque opaque ; Apple suggère .hard pour les interfaces denses.
• Les développeurs signalent que les builds iOS 27 résolvent l'effet automatique du haut en .hard, et les deux styles ont un rendu différent sous iOS 27.
• Pour conserver un fondu, appliquez .scrollEdgeEffectStyle(.soft, for: .top), y compris dans les NavigationStack modales.
• En UIKit, utilisez topEdgeEffect.style et isHidden sur chaque bord de UIScrollView.
• Sur iPhone Duo, les barres verticales n'ont pas d'effet de bord de défilement par défaut : vérifiez les deux orientations.

Pour en savoir plus sur la façon dont les barres d'outils d'iOS 26 regroupent et stylisent leurs éléments, lisez notre guide de la barre d'outils SwiftUI avec Liquid Glass. Pour découvrir des apps et des jeux qui tirent déjà le meilleur parti de l'appareil, parcourez Built for the fold.