Are there any existing UI related features (CSS, JS or HTML) that aren't available cross-browser (or are buggy) that you wish were? If so can you say which and explain the use cases? Specifically looking at existing things rather than new things you want (though feel free to share those too). - ThreadSky

lukewarlow.dev • 130 days ago

Are there any existing UI related features (CSS, JS or HTML) that aren't available cross-browser (or are buggy) that you wish were? If so can you say which and explain the use cases?

Specifically looking at existing things rather than new things you want (though feel free to share those too).

Comments

rgadellaa.bsky.social•109 days ago

Preventing body scroll in iOS Safari (is that a UI issue?)

kevinkleinpdx.bsky.social•129 days ago

https://caniuse.com/?search=leading-trim

kevinkleinpdx.bsky.social•129 days ago

Also this: https://caniuse.com/css3-attr

rikschennink.com•130 days ago

Last time I checked backdrop-filter still worked better in Safari as in Chrome.

zackster.bsky.social•109 days ago

I'm not doing much FE these days, but image resizing before upload was always a nightmare, especially with Safari (surprise!)

jclahoot.bsky.social•130 days ago

Very niche, but I used the pointer lock API recently, and Safari on MacOS is the only major browser where a full width, un-animatable banner suddenly pushes down the whole content of the page when you activate it.
Every other browser uses an overlay message.

marypcbuk.bsky.social•130 days ago

there are quite a few in the requests for what Interop 2025 will cover: think we find out what makes the project next month

josephscott.bsky.social•129 days ago

My request would be for Safari to add support for SVG favicons - https://caniuse.com/link-icon-svg - my dream is for a day where favicon.svg will be sufficient to look good for web and app icons.

samwho.dev•130 days ago

Nested CSS doesn’t work on some fringe browsers (e.g Floorp). The one time I tried to use it I had readers complaining so now I feel like I can’t use it.

lukewarlow.dev•130 days ago

I'm guessing they're just using an old Firefox version under the hood? Potentially the ESRs? Ultimately browsers do owe to it their users to support new widespread standards, so that's a UA issue. I understand not wanting to exclude users though.

iangrunert.bsky.social•130 days ago

There's a laundry list of browser bugs related to drag & drop that @alexreardon.bsky.social has reported. A number of these require browser-specific workarounds in https://github.com/atlassian/pragmatic-drag-and-drop.

https://gist.github.com/iangrunert/1fd515f0741e6676d312aed8393fd31b

alexreardon.bsky.social•129 days ago

If you look through the source of Pragmatic drag and drop, you will find more too. I just haven't updated the gist :)

https://github.com/atlassian/pragmatic-drag-and-drop

nicr.dev•130 days ago

contenteditable=plaintext-only and CSS highlights API :)

I think the only missing one is Firefox and they are in nightly, but they have been in nightly for a while so probably something is blocking them.

nicr.dev•130 days ago

Use case: make the code editor at https://messageformat.dev/playground/ work cross-browser

lukewarlow.dev•129 days ago

Good news! The flag flip for plaintext-only has been merged. It's missing an intent to ship but it seems that they plan to ship it in v136.

nicr.dev•129 days ago

Ohh nice :)

schepp.dev•129 days ago

sizes="auto" for lazily loaded images.

Use case would be to make the life of developers easier and less prone to errors when configuring responsive images which are not the hero image.

Currently still only supported in Chrome.

schepp.dev•109 days ago

Oh, one more: `hidden="until-found"`.

Use case: https://schepp.dev/posts/rethinking-find-in-page-accessibility-making-hidden-text-work-for-everyone/

It's part of the Interop 2025 project, but I wouldn't mind if it came a little earlier than end of year.

lukewarlow.dev•109 days ago

Yes! I took would quite like this + searchable details. I actually proposed both to Interop so I'm glad it was accepted. Hopefully given the relatively smaller surface area compared to other focus areas it might come sooner.

lukewarlow.dev•109 days ago

I'm definitely stealing that hidden until found icon labels idea!

schepp.dev•106 days ago

And again one more: Element.scrollIntoViewIfNeeded() 😍

matthewmorete.com•130 days ago

Safari doesn't apply SVG filters if any of the children are animated, which in practise is limiting that you basically can't use svg filters anywhere for anything 😭
https://codepen.io/matthewmorete/pen/raBozxj

xyrisapp.bsky.social•124 days ago

It seems to be not correct. Check out this sample: https://xyris.app/wp-content/uploads/2024/11/filter.svg
However, I have to admit that Safari has too many problems with animated SVGs.

matthewmorete.com•118 days ago

Sorry to pick this up weeks later but was just thinking about it. In this situation I think it's because it's an svg element being animated with svg animation (rather than an html element being animated with css). But good to know that works! Can probably revisit somethings with that in mind

xyrisapp.bsky.social•114 days ago

You are absolutely correct! I didn't notice that case.

jclahoot.bsky.social•130 days ago

That reminds me of the visual artifacts caused by filter: drop shadow on safari ios for elements that move. I wonder if it’s the same thing under the hood?

I had to bake shadows into an image 🥲

lukewarlow.dev•130 days ago

SVG in WebKit specifically has a lot of historical baggage. Igalia has been working for many years on a new layer based SVG engine for WebKit that should help address many bugs, unfortunately i *think* there's a lack of funding for that work right now.

wamwoowam.co.uk•109 days ago

Origin Private File System is my big one, but also I managed to break display: grid in safari historically

davepermen.net•130 days ago

Any pwa features feel often like a minefield. And Firefox still has zero support without an add on?

(I like my apps having zero Browser chrome outside of close and minimise 😎)

davepermen.net•130 days ago

Styling of progress/meter n such is chaotic, too.

lukewarlow.dev•130 days ago

Idk if you saw but we actually discussed this in OpenUI a bit recently. https://github.com/openui/open-ui/issues/1130 there's some early draft ideas for their structure in the css-forms draft but we need to work out the state side of things.

lukewarlow.dev•130 days ago

Also apparently applying custom styles to these elements can straight up break their accessibility which is both wild and not unsurprising given it's the web. So that needs fixing.

davepermen.net•130 days ago

"both wild and not unsurprising"

ya.. that's the web :) there's always _something_

recently learned that you should not try to mix view-transitions with filter drop shadows. which makes sense but was very wtf :D

lukewarlow.dev•130 days ago

At least we're slowly getting there. Many things coming out today would have seemed impossible in say 2017 when I started working on proper web applications.

utilitybend.com•106 days ago

That one completely escaped my mind (even though in the meeting). This deserves a bit more traction for sure :)

davepermen.net•130 days ago

i missed this *clicks all bells and notifications on* thanks

evaogbe.bsky.social•107 days ago

field-sizing makes a lot more sense to me as a CSS property than something to be hacked with JS

Comments

Posting Rules

Reply