Dear people who make websites,

Now that Safari 17.4 is available, what other new web technology — HTML, CSS, JS, Web API, media support, etc — would you like to see supported in Safari next?

What’s most needed?
What will you use it for?
Or how will it help your team serve your users?
Tell me a story…

#css #html #javascript #web #webdevelopment

@jensimmons Full support of attr() everywhere 

@jensimmons Compression dictionary! Would give us big caching improvements when continiously deploying websites.

I noticed nothing in Webkit's Standards Positions https://github.com/WebKit/standards-positions/issues/160

Mozilla's support was positive (though, don't think they've done anything beyond that yet) https://github.com/mozilla/standards-positions/issues/771

Compression Dictionary Transport · Issue #160 · WebKit/standards-positions

Request for position on an emerging web specification WebKittens who can provide input: Information about the specification Title: Compression Dictionary Transport URL: https://github.com/WICG/comp...

GitHub
@joshhunt @jensimmons yes 100% this. For our larger complex apps compression dictionaries have huge performance implications for our returning users!

@jensimmons there's a bug in iOS Safari that makes `position: sticky` elements blink and disappear. It's hard to reproduce but I see it daily with Analog.Cafe PWA. This may have something to do with `translate3d` I use to animate them (I tried various transform animations). This has been an issue for the past couple of years.

Edit: blink and disappear while the page is scrolling. The elements may stay hidden (when they shouldn't be) even when the scrolling has stopped.

@analog_cafe @jensimmons have you tried to create a reduced test case? Or are there steps to reproduce you could post on https://webcompat.com/ that would be super appreciated.
Bug reporting for the web | webcompat.com

Open source community for web compatibility. Report bugs from websites or for browsers and help us move the web forward.

@karlcow I’ll try my best to find a reproducible sequence and post. Thanks!
@jensimmons Thanks for reaching out. My company is working on a JavaScript video player and it seems iOS still doesn't support the Fullscreen API even though macOS and iPadOS added support in 16.4. This prevents us from monetizing our with ads player while in fullscreen on iOS because the most popular video ad SDK reasonably uses a separate video element to play ads. We may have to disable fullscreen support in iOS as a result.
@jackwellborn Actually it is good that iOS doesn't support obtrusive fullscreen ads.
@jensimmons ScrollTimeline, View Transitions, text-box-trim.
@phloe @jensimmons I’m a broken record about this. Scroll Timeline and View Transitions. Everything else can wait.
@jensimmons opus in mp4, please! Would simplify some stuff for us at Vimeo and enable ambisonic audio in Safari.
@jensimmons Please implement the Web MIDI API. Our users at Soundslice would then be able to use MIDI keyboard entry when creating sheet music. At the moment we have to tell people to use Android or desktop Chrome/Firefox.

@jensimmons

Custom-media
Favicon SVG
Text-box-trim
-webkit-font-smoothing: antialiased (unprefix)
-webkit-line-clamp (unprefix)
-webKit-text-size-adjust (unprefix)
text-decoration shorthand
overlay
overflow-block/inline

Responsive design mode adjust height and width with arrow keys.
https://bugs.webkit.org/show_bug.cgi?id=263118

263118 – Web Inspector: Responsive design mode adjust height and width with arrow keys.

@jensimmons
some things that would be appreciated (in decreasing order of importance):
- proper `aria-describedby` support: https://bugs.webkit.org/show_bug.cgi?id=262895
- focusability of buttons, links, and non-text inputs: https://bugs.webkit.org/show_bug.cgi?id=22261
- standard scrollbar properties (mainly gutter): https://bugs.webkit.org/show_bug.cgi?id=167335
- scrollend and scroll-driven animations: https://bugs.webkit.org/show_bug.cgi?id=209134, https://bugs.webkit.org/show_bug.cgi?id=222295

together, all of these will help us remove safari-specific hacks and provide more reliable user experience

262895 – AX: `aria-describedby` content hidden behind new interaction

@jensimmons xr/vr/ar in the mobile browser please! Apple will get more hype for the Vision Pro, and the industry will move forward!
@jensimmons PWAs in Europe

@wtrmt FYI https://open-web-advocacy.org/blog/apple-backs-off-killing-web-apps/

Also, I'd bet money that much of the Safari team was unhappy with that decision, including Jen. There's only so much power a small non-revenue-generating team has at a huge company.

Apple backs off killing web apps, but the fight continues - Open Web Advocacy

Open Web Advocacy
@jkjustjoshing @wtrmt Safari generates the largest easy revenue out of any business unit at Apple. They get paid 20b from Google for search engine placement (9% of Apple’s net profit).

@jensimmons The ability to use P3/wide gamut colours in SVGs in a way that isn’t hacky/buggy.

Currently the lack of support makes using wide gamut colours in designs a bit hard. (maybe it’s more of an SVG limitation than a browser issue, although if you do something like add a media query in the SVG to make it apply some wide gamut colours, it works but inconsistently, e.g. falling back to sRGB if it’s used as a background image that repeats… maybe because none of it is officially supported?)

@jensimmons p.s. here’s an example of how there’s a rendering inconsistency between iOS and macOS with that specific ‘wide gamut in SVGs’ situation:

https://firewave.com.au/temp/safari_svg_bg/test-oklch.html

(in iOS the colours are correct, in macOS it renders as sRGB if the background repeats – it may just be that this is a non-standard use, but it should render consistently across platforms)

Filed as FB11931815

But proper support for wide gamut colours in SVGs is the main issue I guess.

SVG p3 background image test

@jensimmons View Transitions API for document navigations would be wonderful. We can simplify our user-land code while still delivering a great navigation experience to users.
@jensimmons View transitions support pls.

@jensimmons Web Bluetooth, Web USB

Removing the need to write OS specific tools to interact with peripherals

@ben @jensimmons +1 for this! I was just this week looking for webusb support
@jensimmons @matt a colour picker that includes both the colour palette and the opacity slider in the same modal dialog / as it is now there is an excessive amount of clicking and since iOS 17 the need to always close an overly-enthusiastic modal dialog when all I want to do it is change the opacity / I did not expect to become a person with opinions about these sorts of things but here we are / a working example of the issues can be seen here – https://github.com/aaronland/fingerprint
GitHub - aaronland/fingerprint: None of the other digital drawing tools were my jam, so I wrote my own.

None of the other digital drawing tools were my jam, so I wrote my own. - aaronland/fingerprint

GitHub
@jensimmons cross-root ARIA, anchor positioning, @custom-media, view transitions, navigation API, scroll driven animations. And finally a better way than share sheet “Add to home screen” to add a web app (beforeinstallprompt event?).
@jensimmons We have an older app that we would love to replace with a responsive web application that works on every device. Would love view transitions, scroll driven animations, navigation API to enable a native-like experience (without having to resort to using something like Ionic). Would also love to ditch floating-ui and use popover + anchor positioning. Web standards all the way!
@jensimmons I’ve said this a few times, but please bring back the ability to have Web Apps adapt to dark/light modes! This behavior has seemingly been broken since 17.0! Now users have to force quit to have the changes take effect, but previously it worked via Control Center.
@jensimmons Navigation API. Invokers. Cookie Store API.
@Olliew Igalia is contributing the Navigation API to WebKit 😊

@jensimmons Continued improvements to PWA support, though honestly what that needs most at this point is an effort to restore trust with developers who make PWAs... because I have very little faith in Apple in that arena at this point

If you're allowing other browser engines in the EU, why not the rest of the world? (I don't buy the "security and privacy" argument for a second)

@jensimmons lazy loaded content to be loaded when you print

https://bugs.webkit.org/show_bug.cgi?id=224547

224547 – Images and iframes with attribute loading=lazy do not print if not viewed (scrolled to) first

@jensimmons I use Kagi search, and I need to use a somewhat unreliable Safari plugin that hijacks my search on DuckDuckGo to redirect it to Kagi.

I *really* need Safari on iOS to allow an extension to authentically add a search provider.

I do not work on/for Kagi, but I would have to imagine proper search plugin support would be groundbreaking for anyone who is building search.

@jensimmons In no particular order (and pbbly far from complete)
- all the Notification API feats that are currently missing / don't do anything in Safari iOS
- Navigation API
- Fullscreen API on iOS
- Web app install prompts
"scrollbar-width" | Can I use... Support tables for HTML5, CSS3, etc

@jensimmons CSS Paint API please 🙏
We use it for basically all UI in https://narrow.one/, but since Safari doesn't support it we have to use a polyfill and the performance is not great compared to Chrome.
Narrow One

Capture the flag medieval style!

@jensimmons Ooh and pointer lock on iOS! We get so many complaints that people can't play with their bluetooth mouse.
242740 – [JSC] ReferenceError when multiple modules are simultaneously importing a module containing a top-level await

WebKit Bugzilla
@jensimmons scroll driven animations :)
@jensimmons Would be great if we didn't have to apply the transform hack for weird Safari bugs all the time ;)
@amber @jensimmons I am curious about which transform hack you’re referring to. Could you elaborate?
@smfr @jensimmons many times in Safari and no other browser, something will be "invisible" for no good reason and won't show unless you use transform: translate3d(0,0,0); (not a z-index issue either)
@amber @jensimmons I’d love to see an example if you have one
@smfr @jensimmons i dont off the top of my head, but it's a super common bug, you can prob find a bunch of stackoverflows about it
@amber @jensimmons I can find a lot of older posts on SO, but nothing recent, and we've fixed many issues. Let me know if you run into anything with recent Safari versions.
@smfr @jensimmons ack i just fixed one last week, it seems to be any time we're using any sort of transforms in the layers, but ill try to remember to share it with you the next time we come across
@smfr @jensimmons ok FOUND one! Sticky header that's only visible on scroll up was causing this weirdo bug in Safari, fixed with the transform translate3D fix
@amber @jensimmons Cool! Is this on a public page?
@smfr @jensimmons unfortunately no, we're launching this super quick so i had to fix it, but the *next* one i'll try to leave up for you - just wanted to show you an example
@smfr rofl also realized the last image had nothing to do with the bug lol. Whoops!