WWDC 2025 - What’s new in Safari and WebKit

Apple's Safari team unveiled significant web technology enhancements at WWDC 2025, focusing on performance, accessibility, and developer experience.

Animation & Motion

Scroll-Driven Animations (Safari 19)

Key Benefits:

• Eliminates JavaScript dependency for scroll-based animations
• Improves battery life and performance
• Two new timeline types: scroll() and view()

Implementation Points:

• Progress bars linked to scroll position
• Element animations triggered by viewport entry
• Accessibility-first design with motion preferences support

/* Progress bar example */
footer::after {
  content: "";
  height: 1em;
  width: 100%;
  background: var(--yellow);
  left: 0;
  bottom: 0;
  position: fixed;
  transform-origin: top left;
  animation: progress-scale linear;
  animation-timeline: scroll();
}

@keyframes progress-scale {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* View-based animations */
.topic-item {
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: 0% 50%;
}

iOS Developer Considerations:

• Reduces JavaScript bundle size in WKWebView implementations
• Better energy efficiency for iOS apps with web components
• Consistent animation behavior across device orientations

Cross-Document View Transitions (Safari 18.2+)

Core Features:

• Seamless page transitions without JavaScript
• Same-origin security enforcement
• Optional enhancement pattern

@view-transition {
  navigation: auto;
}

@media not (prefers-reduced-motion) {
  #school-info {
    view-transition-name: main-body;
  }

  ::view-transition-old(main-body) {
    animation-name: slide-out;
  }

  ::view-transition-new(main-body) {
    animation-name: slide-in;
  }

  @keyframes slide-in {
    from { translate: 100vw 0; }
  }

  @keyframes slide-out {
    to { translate: -100vw 0; }
  }
}

Production Guidelines:

• Wrap complex animations in prefers-reduced-motion queries
• Maintain navigation functionality without transitions
• Test across different iOS device screen sizes

Layout & Positioning

Anchor Positioning

Revolutionary Changes:

• CSS-only tooltip and popover positioning
• Responsive behavior without JavaScript
• Integration with Popover API

Key Properties:

• anchor-name: Define positioning reference (must start with two dashes)
• position-anchor: Connect element to anchor
• position-area: Grid-based positioning
• position-try: Fallback positioning strategies

.profile-button {
  anchor-name: --profile-button;
}

.profile-menu {
  position-anchor: --profile-button;
  position-area: bottom span-right;
  position-try: flip-inline;
}

iOS Integration Benefits:

• Reduces complex positioning logic in hybrid apps
• Automatic viewport adaptation for different iOS devices
• Better accessibility support for assistive technologies

Visual Effects & Styling

Background-Clip Enhancements

New Capabilities:

• background-clip: border-area for gradient borders
• Enhanced text gradient support
• Better performance than image-based solutions

.logo {
  background-image: linear-gradient(to bottom right in hsl, yellow, orange);
  background-clip: text;
  color: transparent;
}

.primary-btn {
  background-image: linear-gradient(to bottom right in hsl, yellow, orange);
  background-clip: border-area;
  border-color: transparent;
  background-origin: border-box;
}

/* Shorthand version */
.primary-btn {
  background: border-area linear-gradient(to bottom right in hsl, yellow, orange);
  border-color: transparent;
}

Shape() Function (Safari 18.4)

Advantages Over Path:

• Responsive shape scaling
• CSS unit support (vh, %, calc())
• Selective responsiveness control

Performance Impact:

• Reduced SVG dependency
• Better scaling on iOS device rotations
• Lower memory usage for complex shapes

Text-Wrap: Pretty (Safari 19)

Typography Improvements:

• Eliminates orphaned words
• Reduces excessive hyphenation
• Better text flow and readability

iOS Considerations:

• Enhanced reading experience on smaller screens
• Better text rendering in Portrait/Landscape modes
• Minimal performance overhead

Media & Content

HDR Image Support

Technical Specifications:

• 10-16 bit color depth vs 8-bit SDR
• P3 colorspace support
• HEIC and AVIF format compatibility

Control Mechanisms:

img {
  dynamic-range-limit: no-limit;     /* Full HDR brightness */
  /* dynamic-range-limit: standard;    SDR rendering */
  /* dynamic-range-limit: constrained; Balanced (coming soon) */
}

iOS Developer Impact:

• Better photo display in camera/gallery apps
• Consistent rendering across iOS devices with different displays
• Automatic fallback for non-HDR devices

Enhanced Media Format Support

New Additions in Safari 19:

• Ogg Opus and Ogg Vorbis audio codecs
• WebM support in MediaRecorder API
• 15 total supported media formats

3D and Spatial Content:

• Stereoscopic 3D model rendering
• Immersive video support inline
• Enhanced spatial web capabilities

Development Tools & Testing

Safari Developer Features

Responsive Design Mode Enhancements:

• Viewport presets for common device sizes
• Portrait/landscape toggle functionality
• Streamlined testing workflow

iOS Testing Benefits:

• Accurate iPhone/iPad viewport simulation
• Quick orientation testing
• Better development-to-device consistency

Conclusion

Safari's WWDC 2025 updates represent a significant step forward in web technology capabilities, particularly benefiting iOS developers building hybrid experiences.
These enhancements reduce JavaScript dependencies, improve battery life, and provide more robust cross-device experiences—critical factors for iOS applications incorporating web technologies.

Key Takeaways:

• CSS-first approach reduces complexity and improves performance
• Enhanced media support enables richer content experiences
• Progressive enhancement ensures backward compatibility

Comments

[ArshTechPro]

CSS-first approach reduces complexity and improves performance
Enhanced media support enables richer content experiences
Progressive enhancement ensures backward compatibility