Again, unfortunately, I go to use a feature that is apparently now supported in Safari/WebKit (and considered baseline on #MDN), only to discover that one of the features isn’t implemented.
Today’s example? The <dialog> element.
After messing around with it and wondering why clicking the backdrop wasn’t closing it even though closedby="any" was set, I find the closedby attribute isn’t implemented at all 😶
Now I have to add some JS that shouldn’t be needed.
Similarly… foiled again.
Me, earlier:
Oh cool, the @ page size descriptor is supported by Chrome, Firefox and Safari! I’ll use it for this print and PDF layout that needs to be A4 landscape.
Me, now, actually trying it:
Wait, why isn’t it working? Oh. Oh no. It does not work at all in Safari. And MDN/caniuse.com say it does, but they are wrong (and there is an open issue about it).
The WebKit bug 63575 is from… 14.5 years ago.
*dies* 💀
The year is 2026 and again, today, I still need to use a prefixed version of user-select because WebKit still requires it (-webkit-user-select)…
https://bugs.webkit.org/show_bug.cgi?id=208677
There’s a proposal for it in Interop 2026 and I really hope it was selected (the proposal selection process has already been completed, but the results aren’t expected to be published until next month).
Another great new CSS feature that is starting to be available in more browsers is field-sizing, which allows you to size an input to fit its value with:
field-sizing: content;
Great for UI like tags, where you want to be able to type directly into them and have them automatically resize to fit the text.
(#CanIUse shows the feature as not being available in Safari Technology Preview, even though all the individual child features show that it is available)
If you haven’t used it before, image-set() is used in CSS in any place where you’d normally use an image. Here’s a simple example where the browser will use JPEG XL if it supports it, or JPEG if it doesn’t:
background-image: image-set(
url("bg.jxl") type("image/jxl"),
url("bg.jpg") type("image/jpeg")
);
( you can also specify resolutions, e.g. url() 2x type() )
It’s really nice that we now have wide support for image-set() in browsers so that it’s possible to use JPEG XL in browsers that support it (with automatic fallback to other formats for browsers that don’t), even for cases like background images, which used to be a pain point when all we had was <picture>.
This is an example of the kinds of big wins that can be achieved through the #Interop Project.
gentle reminder for webdevs. There is no point putting a sourcemap reference in the JS file if the sourcemap is 403 for people outside of your gated environment. :)
But putting a working reference to the sourcemap is invaluable in helping people working on webcompat to be able to understand why the website is failing and how to help find a fix.
with love from #webcompat
So we have tel: and mailto: but we don’t have a good cross-platform way to provide address/map links that will use the platform/browser’s preferred maps app/site.
geo: isn’t supported in enough places and probably needs extra features anyway.
It’s obnoxious to have to send everyone to Google Maps, or do sniffing to rewrite links (which is also full of bad assumptions, e.g. change links to Apple Maps on Apple devices, but what if they have the Google Maps app installed?)
Firefox profiles: Private, focused spaces for all the ways you browse.
https://blog.mozilla.org/en/firefox/profile-management/
Profiles were the way I was separating my day to day browser from my compat browser when I was doing moz #webcompat
https://www.otsukare.info/2014/11/12/configure-webcompat-browser
That feeling when you have been diagnosing a bug on a very complex website with a lot of breakpoints and you have been going through the minified obfuscated code step by step for a very long time… and the browser is crashing. #webcompat
I wonder if it’s in any way related to this other issue I have with repeating backgrounds and P3 colour on macOS:
Here you go, #WebKit people:
https://firewave.com.au/temp/webkit_imagerendering/
image-rendering: pixelated isn’t correctly applied if the element is large enough that the background-image repeats.
#gpn23 signup to #micropoc has some kind of web compatibility problem.
When I try to paste my password in Firefox the link popup opens so I effectively cannot register… 🫠🫣
OK a couple of words about proxy detections using feature detections. Avoid it as much as possible.
https://www.otsukare.info/2025/06/06/proxy-detections-are-wrong
A must listen for all browser implementers and the millions of us working on Interop/Webcompat issues. A very good podcast with @RickByers hosted by @bkardell and Eric Meyer.
https://www.igalia.com/chats/unshipping
> "Blink's Principles of Web Compatibility and willingness to change and even unship features."
It's not necessary only about Blink as they touch about general things with regards to webcompat and interop. It's definitely home for me.
Oh great, the hospital I went for a check-up has a patient portal that was not tested with #Firefox: I cannot open the Doctor's report.
What's the bug? The front-end downloads the PDF as a base64-encoded string and then instructs the browser to navigate to a data: URI.
Problem: Firefox has been blocking this behavior since late 2017: https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-59/
@shsteimer In terms of JS debugging, what tools are missing?
If you have the opportunities it would be great to have a blog post detailing what are all the features you would love to see with small examples of what it would solve or even a gist with the same information. And even better, open separate bugs on bugs.webkit.org for each of them, but maybe I can do that too if you explain them.
Web Inspector (safari devtools) is my main working tool for #webcompat diagnosis.
https://www.w3.org/news/2025/proposal-to-endorse-vision-for-w3c-as-a-w3c-statement/ from @w3c
"
W3C’s Vision for the Web:
* The Web is for all humanity.
* The Web is designed for the good of all people.
* The Web must be safe to use.
* There is one interoperable world-wide Web.
"
Right there. 4th bullet… here it is #webcompat
#PaleMoon is so compliant with web standards that it becomes a #webcompat issue lol: https://forum.palemoon.org/viewtopic.php?f=70&t=32165
Where the browser should have given a SyntaxError for:
document.querySelectorAll('a[target="_blank"]:not([class*="modal-video"]')
..the mainstream (i.e. #Chrome / #Edge, #Firefox, and probably #Safari too) just doesn’t and instead ignores the missing closing parenthesis for querySelectorAll like the error isn’t there at all…
What’s even more frustrating is that #Mozilla knew about this bug for 12 years and decided not to fix it because of their wrong interpretation of the spec: https://bugzilla.mozilla.org/show_bug.cgi?id=815662