Scroll edge effect en SwiftUI: soft frente a hard y el cambio de iOS 27

Vuelve a compilar una app con Xcode 27 y puede que sus barras de navegación se vean de repente distintas. Donde antes el contenido se fundía suavemente bajo la barra de herramientas, ahora hay una línea marcada y una franja más sólida. No ha cambiado nada en tu código. Lo que ha cambiado es el scroll edge effect predeterminado de SwiftUI, el tratamiento que iOS aplica donde el contenido que se desplaza se encuentra con una barra.

Esta guía explica qué es el scroll edge effect, en qué se diferencian .soft y .hard, qué cambió entre iOS 26 e iOS 27 y cómo elegir el aspecto que quieres en SwiftUI y UIKit. Se basa en la documentación de Apple y en sesiones de la WWDC25, en la respuesta de un ingeniero de Apple en los foros para desarrolladores y en informes de desarrolladores como @sarunw. El cambio de iOS 27 no aparece en las notas de la versión de Apple, así que trátalo como un comportamiento observado que puede cambiar entre versiones.

¿Qué es el scroll edge effect en SwiftUI?

El scroll edge effect llegó en iOS 26 como parte de Liquid Glass. Las barras de herramientas ya no tienen un fondo opaco; sus elementos flotan sobre tu contenido. Para que esos elementos sigan siendo legibles, el sistema trata el contenido que se desplaza por debajo. La sesión de Apple de la WWDC25 Build a SwiftUI app with the new design lo describe como «un sutil efecto de desenfoque y fundido aplicado al contenido bajo las barras de herramientas del sistema».

Lo obtienes automáticamente bajo las barras del sistema. Apple pide que elimines los fondos adicionales o las capas oscurecedoras que hayas colocado detrás de los elementos de la barra, porque interfieren con el efecto. Las barras personalizadas también pueden sumarse: safeAreaBar(edge:alignment:spacing:content:) de SwiftUI, nuevo en iOS 26, muestra contenido como una barra personalizada junto a una vista, y los scroll views que quedan debajo reciben un efecto de borde como el de una barra del sistema.

Controlas el efecto con scrollEdgeEffectStyle(_:for:), también nuevo en iOS 26. Se aplica a los scroll views que haya en cualquier lugar dentro de la vista que modificas, así que puedes definirlo en un contenedor en lugar de en cada scroll view.

¿Qué diferencia hay entre .soft y .hard?

ScrollEdgeEffectStyle tiene tres valores. Apple los define así:

El ejemplo de Apple de interfaz densa es la app Calendario. En la versión de UIKit de la sesión, Apple dice que el estilo hard se parece a los fondos de barra estándar de iOS 18. Este es el ejemplo de la sesión de SwiftUI:

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

¿Por qué el scroll edge effect se ve distinto en iOS 27?

Cambiaron dos cosas, y es fácil confundirlas.

Cambió el valor predeterminado. @sarunw lo resume así: «En iOS 26, el scroll edge effect predeterminado es .soft. En iOS 27, es .hard». Los desarrolladores vieron lo mismo en sus propias apps. El proyecto Shellbee abrió un bug cuando las barras de toda su app se volvieron planas tras una compilación de iOS 27, y DevelopersIO encontró lo mismo en un safeAreaBar personalizado. En sentido estricto, el valor predeterminado sigue siendo .automatic; lo que cambió es en qué se resuelve. DevelopersIO también informa de que una app compilada con Xcode 26.6 y ejecutada en iOS 27 mantuvo el aspecto anterior, así que el cambio depende del SDK con el que compilas. Su autor no encontró ninguna mención en las notas de la versión de iOS 27 ni de Xcode 27.

Cambiaron los propios estilos. @sarunw señala que .hard no es igual en las dos versiones. En iOS 26 es casi una barra sólida, y el texto que hay detrás no se puede leer. En iOS 27, la línea de corte se mantiene, pero el contenido sigue viéndose a través. En el modo oscuro describe la misma diferencia: .soft funde, .hard corta, y el estilo de iOS 27 es más equilibrado. Apple también cambió .soft. En los foros para desarrolladores, un ingeniero de Apple escribió que «el estilo .soft ha cambiado sustancialmente en iOS 27».

¿Por qué el cambio? Apple no lo ha explicado públicamente. La misma respuesta del foro señala que muchas apps eligieron .soft de forma explícita donde .automatic habría sido más adecuado, y que .soft «no es el valor predeterminado del sistema».

¿Cómo recupero en iOS 27 el fundido del borde de desplazamiento de iOS 26?

Si tu diseño depende del fundido, pídelo. La solución de @sarunw es un solo modificador:

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

Si todavía das soporte a versiones anteriores a iOS 26, envuélvelo en una comprobación de disponibilidad para poder aplicarlo en todas partes con una sola llamada:

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

Tres advertencias. Primero, las notas de la corrección de Shellbee indican que un estilo definido en la raíz de la app no llegaba a los NavigationStack presentados como sheets o coberturas a pantalla completa, así que aplícalo dentro de cada uno. Segundo, «recuperar» no es exacto: como .soft se rediseñó en iOS 27, obtienes el aspecto soft de iOS 27, no una copia exacta píxel a píxel de iOS 26. Tercero, el ingeniero de Apple recomienda .automatic siempre que cubra tus necesidades de diseño, y señala que .soft puede no encajar en todos los diseños.

También hubo un bug de compatibilidad. Un hilo de los foros para desarrolladores informó de que .soft se mostraba totalmente transparente sobre un safeAreaBar en las betas de iOS 27, pero solo en apps compiladas con el SDK de iOS 26. Apple dijo que iOS 27.2 pondría el nuevo .soft a disposición de esas apps, y una publicación posterior del hilo indica que quedó corregido en iOS 27.2 beta 4. Si distribuyes una compilación enlazada con iOS 26, compruébala en iOS 27.2.

¿Cómo defino u oculto el scroll edge effect en un solo borde?

El segundo parámetro de scrollEdgeEffectStyle(_:for:) es un Edge.Set, así que eliges a qué bordes se aplica un estilo: uno, varios o .all. La solución de DevelopersIO para su barra inferior personalizada solo afecta a ese borde:

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

Su autor señala que el modificador puede estar en una vista exterior que envuelva el scroll view, como aquí.

Para eliminar el efecto, usa scrollEdgeEffectHidden(_:for:), nuevo en iOS 26. Ambos parámetros tienen valores predeterminados, así que el modificador sin argumentos oculta todos los bordes:

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

Ocúltalo solo cuando no haya nada fijo sobre ese borde o cuando tu propio diseño ya mantenga los controles legibles. De lo contrario, los botones de cristal acaban sobre contenido sin tratar.

¿Cómo cambio el scroll edge effect en UIKit?

UIKit tiene el mismo modelo, también nuevo en iOS 26. Cada UIScrollView expone topEdgeEffect, bottomEdgeEffect, leftEdgeEffect y rightEdgeEffect. Cada uno es un UIScrollEdgeEffect con un style que puede ser .automatic, .soft o .hard, y un indicador isHidden que es false por defecto.

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

Para tus propias vistas sobre el borde de un scroll view, como una fila de botones, la sesión de Apple Build a UIKit app with the new design usa UIScrollEdgeElementContainerInteraction. Así, los descendientes del contenedor, como etiquetas, imágenes y controles, dan forma al efecto de borde.

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

La mayoría de los informes sobre el cambio del valor predeterminado en iOS 27 proceden de proyectos SwiftUI, y el hilo del foro mencionado antes incluye a un desarrollador de UIKit que ve el bug de .soft. Comprueba también las pantallas de UIKit en iOS 27 en lugar de dar por hecho que no les afecta.

¿Cómo funciona el scroll edge effect con la barra vertical de iPhone Duo?

En iPhone Duo, las apps compiladas con el SDK de iOS 27.1 mueven los elementos de navegación y de la barra de herramientas a una barra vertical a lo largo de un borde lateral. El Tech Talk de Apple Raise the bar with iPhone Duo dice que una barra vertical «no tiene scroll edge effect por defecto», igual que las barras horizontales, y que sí recibe un fondo cuando Reducir transparencia está activado. Apple pide que las vistas personalizadas de la barra sigan siendo legibles en ambos casos. Nuestra guía sobre la barra de herramientas vertical de iPhone Duo explica cuándo pasan las barras a vertical.

Apple no documenta cómo interactúa scrollEdgeEffectStyle con .leading o .trailing con la barra vertical, así que no construyas sobre suposiciones en ese punto. La pantalla interior en vertical mantiene las barras horizontales, así que un estilo que definas para .top importa en el mismo dispositivo que muestra una barra vertical en horizontal. Comprueba ambas orientaciones y mantén el contenido alejado de la barra con las áreas seguras y los márgenes de contenido adecuados.

Puntos clave

• El scroll edge effect, nuevo en iOS 26, mantiene legibles las barras de Liquid Glass sobre el contenido que se desplaza. Defínelo con scrollEdgeEffectStyle(_:for:) y ocúltalo con scrollEdgeEffectHidden(_:for:).
• .soft es un límite desenfocado y .hard uno casi opaco; Apple sugiere .hard para interfaces densas.
• Los desarrolladores informan de que las compilaciones de iOS 27 resuelven el efecto automático superior como .hard, y ambos estilos se ven distintos en iOS 27.
• Para conservar un fundido, aplica .scrollEdgeEffectStyle(.soft, for: .top), también dentro de los NavigationStack modales.
• En UIKit, usa topEdgeEffect.style e isHidden en cada borde de UIScrollView.
• En iPhone Duo, las barras verticales no tienen scroll edge effect por defecto, así que comprueba ambas orientaciones.

Para saber más sobre cómo agrupan y dan estilo a sus elementos las barras de herramientas de iOS 26, lee nuestra guía de la barra de herramientas de SwiftUI con Liquid Glass. Para ver apps y juegos que ya sacan el máximo partido al dispositivo, visita Built for the fold.