WWDC 2023: Meet Safari for spatial computing

To follow a link, you can reach out and touch the page or look at the link and perform a tap gesture

Use same techniques for responsive/progressive designs:

• Viewport units in CSS
• Media/container queries in CSS
• Vector graphics in SVG
• devicePixelRatio for bitmap assets
• Responsive images

When user tap/pinch begins, eye location is used to find HTML target for pointerdown event
pointermove events will then follow hand motion, and pointerup will fire on release

When user directly touches an element, hand position is used for pointerdown
pointermove events follow hand motion, and pointerup will fire when hand is released
Note that for direct touches, user's eye location is not used

Media queries for Safari in visionOS:
@media (pointer: coarse)
@media (hover: none)
However, note that mouse and keyboard may still be connected over Bluetooth

Hover events aren't dispatched because eye-tracking feedback is handled at the system-level, even below Safari, via Interactive Regions
Use cursor: pointer for HTML elements to indicate that an element is interactive
Note that cursor property is inherited, so use pointer-events: none to disable interactivity for sub-elements

The border-radius property controls the hover ring Safari will show on an element when the user looks at it (assuming the element was marked with cursor: pointer)

Due to nature of visionOS windowing system, a full-screen webpage may have a window.innerWidth/innerHeight that is greater than window.screen
Similarly, webpages on visionOS may still receive resize window events, even after the webpage is full-screen

In requestAnimationFrame there may be some jitter when the event is called, so have to manually keep track of the last time a frame was requested to get the correct time for the current frame

Links to USDZ files around an image containing a rel="ar" property will automatically become 3D Quick Look experiences

There is also a <model> element being proposed as a W3C standard to natively specify 3D objects
Example: <model interactive><source src="assets/example.usdz"></model>

Can also use WebXR for immersive 3D experiences in Safari