search

petalframework / petal_components

Phoenix + Live View HEEX Components
https://petal.build/components
MIT License
847 stars 97 forks source link

range not rendering properly on safari #357

Open dvic opened 1 month ago

dvic commented 1 month ago

https://www.whatsmybrowser.org/b/381QC

The coloured area of the select range is not visible.

safari: image

chrome: image

nhobes commented 1 month ago

You're right - thanks for pointing this out. I'll look into it and come back to you.

nhobes commented 1 month ago

So I've done a fair bit of digging into this and attempted multiple solutions, but it's still giving me grief (so that the range still provides a dynamic fill without requiring JS).

I looked into this link, but keep getting inconsistent results with the thumb.

Long story short, there's a proposal to standardise input[type="range"] styling: https://github.com/w3c/csswg-drafts/issues/4410

I don't have time at the moment to investigate this further, but feel free to submit a PR if you come up with a solution :)

nhobes commented 1 month ago

For the record, this is where I got to, the dynamic fill is using a clip-path and box-shadow to simulate the progress fill.

CleanShot 2024-10-11 at 14 38 11@2x

dvic commented 1 month ago

I looked into this link, but keep getting inconsistent results with the thumb.

What inconsistency are you referring to? On my iPhone 14 that link works just fine, haven't tried my Mac yet.

nhobes commented 1 month ago

Sorry, I just meant when I tried to modify our range with those styles, it didn't quite work out well cross-browser like I'd planned. I got close as you can see above with the screenshot I attached, but couldn't quite get the desired look and feel.

dvic commented 1 month ago

Sorry, I just meant when I tried to modify our range with those styles, it didn't quite work out well cross-browser like I'd planned. I got close as you can see above with the screenshot I attached, but couldn't quite get the desired look and feel.

Ah clear