Chrome 83 makes extreme changes to some HTML widgets in p5 sketch

p5.js
#1

Hi folks,

I thought I’d post something I found out the other day. I uprevved my Mac Chrome browser from 81.xxx to 83.xxx and a lot of my HTML widgets in a p5.js sketch broke. Well, substantially changed their appearance, and font sizes. And in the case of the Color Picker, just plain broke - the five options (RGB sliders, colour wheel, fixed palette etc) were replaced by just one “colour field” picker, with no eye-dropper colour sampler, and I think not even a hex colour option (I forget if that last one is exactly true).

So after much searching, I found this is deliberate ! Chrome and Edge have got together and “harmonised” their widgets, and “improved” them. I can tell you from my own experience that if Microsoft offers to help you “improve” something, be very, very, very afraid.

Details:

Lots of people complaining about it. It’s quite a major change to force on web pages. And Firefox and Safari have not changed, although they weren’t 100% identical before either.

Anyway, there is a solution. You can force Chrome back to the old style …
Put this in your Chrome address bar …

chrome://flags/#form-controls-refresh

It brings up a bunch of internal options … set the Web Platform Controls updated UI ie. the one you land on, to Disabled. Have to then restart browser. Then you’re back to Chrome 81 behaviour.

I don’t know how long that escape route will last. I wonder whether p5.js can bring any pressure to bear to keep it available.

Ciao, GE.

PS. I’ll cross-post to p5.js GitHub.

#2
#3

Hi @GoToLoop, thanks for taking an interest. The p5 team closed my “bug”, fair enough. But I’m happy to have flagged it and a solution of sorts, for anyone whose sketch is heavily affected like mine was. Ciao.

#4

Yeah, like it or not, browsers will continue evolving, for sure. :blush: The thing web developers and p5.js enthusiasts can do is avoid relying on specific browser behavior, and user interface features that are not specified in the HTML Standard.

The standard for Color state (type=color) leaves a lot up to the browser vendor. Unfortunately, the standard does not guarantee the presence of an eye-dropper color sampler, for example.

If you need the user experience to be consistent for every user, across browsers and devices, you’ll want to implement the functionality yourself (or use someone else’s custom color picker). That way, you have 100% control over the features and interface.

And even if the trend in the browser world is a little worrying (it’s getting a bit too homogeneous for my taste), you still have the option to vote with your feet and switch browser to one that better matches your preference. I think that is the most powerful thing we as individuals can do. (If everyone continues surfing the web using Chrome and Edge, Google and Microsoft can do whatever they want.)

1 Like
#5

Hi, an update from 2021. The option chrome://flags/#form-controls-refresh seems to have been disabled in Chrome 86 or 87. So I’ve fallen back to just manually changing the things that I can, in JavaScript. One good discovery - you can re-add the Eye Dropper with chrome://flags/#color-picker-eye-dropper

2 Likes