There's ~four of us trying to reproduce this right now, using Astro and Remix, and cannot at all.
An important note: React-based frameworks tend to use camelCase attributes vs. hyphen-case (which is the output) in components: including the icon library being used here. Something during the build process is not converting them to hyphen-case.
* I've pasted a decently complex SVG exported from Figma into a Remix component verbatim (hyphen-attributes) and it renders fine: https://9b14a265.test-broken-svgs-remix.pages.dev/ (scroll down)
* I've rewritten those attributes to camelCase: and again, renders fine - https://1af766a8.test-broken-svgs-remix.pages.dev/
* This is all deployed via the Pages Build system; no local builds at all.
* Someone else on the team has an Astro example stood up with the specific unplugin-icons library: https://astro-svg.pages.dev/ - cannot reproduce the invalid SVG attributes.
We're going to continue investigating but don't see this as widespread and don't yet have any other reports. That there is a _difference_ between the direct deploy vs. using Pages Builds is a problem, though. We've also asked the Astro folks to understand if there's something up here as well.
(If not clear: I work at Cloudflare)
Might this happen if the author did not have the Mime type set correctly when serving his .svg assets?
So this is not Cloudflare, the hosting service, renaming SVG attributes as they are served, but the Cloudflare Pages build process hooked to the developer's Git repo.
Weird behaviour. I'm interested in reading the actual reason that build ends up doing this.
(Side note: I really wish people would leave out the image memes when writing something like this. The animated one at the end even makes it hard to read the final paragraph.)
Yeah, really weird. I'm raising this internally to figure out WTF. OP can email me (jgc@cloudflare) with account details but I'm doing my own test right now on jgc.org.
EDIT: OP please drop me an email. Three of us internally at Cloudflare have tried to reproduce this and failed and we need to chat with you about what's in your build process so we can try to narrow this down. Cheers!
I made a simple test: https://jgc.org/svg and we made a couple more using Astro: https://misty-mouse-d370.pages.dev/hello and https://cec6e042.laz-svg-test-assets.pages.dev/.
Turn on reader mode.
I really empathize with the author, having dealt with many similar weird issues myself. To Cloudflare's credit however, since most of the Pages/Workers stuff is open source, one can usually find the problem in the source code and submit a fix oneself.
It's an example of a product that's well designed, generous in its free-tier, yet occasionally confounding, probably due to the speed their team moves.
Also wanted to add that I appreciate the author writing about the bug and their debugging process. That's definitely something I wish I had done more of, instead of thinking at the time 'I filed the issue, does the whole world need to know about this?'
(Sometimes daily reading of HN can have this effect, I think)
Then months go by, the issue I filed was moved or something happened to it, and I lost a way of tracking it... So I think it's important to a.) file the issues but b.) document the issue in your own way while everything's fresh in your mind.
Thank you for your kind words. I found myself wishing I wrote more of how I debug while I wrote it and will be doing more of it. As you say, issue trackers (even GitHub) sometimes suffer from being swamped and neglected.
Do you have html/js/css minification turned on in your cloudflare account/domain?
It seems from the articles conclusion that it shouldn't be related. But I had similar issues with SVG and css when I first deployed my nuxt app to CF pages. I only thought to try turning off CF minification because there was some tiny footnote about it being an issue on CF somewhere in the nuxt docs or maybe GH issues.
I forgot to mention that. No, I have all of that turned off. Turns out it’s being deprecated soon anyway.
I've been using cloudflare pages like two years now and all svg icons are doing normal they're supposed to. I use Sveltekit.
So I think, it's between your framework and cloudflare pages.
Not sure if it's related, I had to disable Cloudflare's "Rocket Loader" feature 3 days ago. It suddenly started breaking the hamburger menu / menu accordion ~4-5 days ago.
> Sorry, you have been blocked > You are unable to access lloydatkinson.net
shrug
Thanks!
Don't you just love internet balkanization?
For image processing, use a proper SaaS dedicated to it: https://www.gumlet.com/image-optimization/
Hey, at least here cloudflare isn't inserting captchas into json (turns out Roundcube webmail breaks horribly when someone does that!)
Cloudflare and its captchas are the scourge of the modern internet. Especially if you run a VPN on your router. The amount of times I’ve been in seemingly endless click-the traffic-light loops is just ridiculous.
Many of the times I’ll just refuse to use the site, but some things I need to endure.
They clearly have no incentive to be better either. The pain falls entirely on the visitor.
If you can’t tell I’m human then you’re doing it wrong.
> If you can’t tell I’m human then you’re doing it wrong.
I'm gonna go out on a limb and say that if multiple multi-billion dollar companies struggle with it, then it's less of a solved problem than you're implying.
> Especially if you run a VPN on your router.
Very few people do this, and almost all of them are also using ad blockers. If using Cloudflare protects a site from thousands of bot attacks while inconviencing a few real users with esoteric setups, that tradeoff is well worth it for most site owners.
I've set up Cloudflare on hundreds of websites and when you look at the amount of nasty stuff it blocks, it quickly becomes clear why it's needed. If you want to blame someone, blame the Russian and Chinese governments (among others) for doing little to nothing about their unfathomably massive botnets.
Most abuse on the internet comes over VPNs, so why is it surprising when website operators make you jump through hoops if you choose to blend in with low quality VPN traffic?
Also, why would it be easy to tell that your request is from one of the good guys?
CloudFlare is cancer: Sorry, you have been blocked You are unable to access lloydatkinson.net Why have I been blocked? This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.
What error code specifically you get?
That is some site owner that has configured Cloudflare to block you. It's the same thing as an establishment hiring security guards to block access.
That is some site owner who wanted free cdn/ddos protection, accepted the default settings, and has no way of knowing which the blocked users are blocked wrongly.
I used to use cloudflare on my static website and I had no idea I was blocking all tor users until someone on HN let me know.
Cancer is too strong a word though. It’s more like a bad case of jock itch IMHO.
I agree, default "Medium" firewall setting is the very first thing I change on a new site.
>and asking around on the Cloudflare Discord
How was that? Last time I tried to submit a bug report there the experience was terrible ...
The Cloudflare Discord is interesting. It's mostly maintained by community volunteers (Champs and MVPs), with team participation varying drastically from team to team. The community does a great job when they can, but it doesn't feel like most teams are empowered to help people there. There are some fantastic employees who do help regularly though, but as far as I know, most employees are doing this out of kindness, since it's not actually part of their role (whether Cloudflare should make this a part of some folks roles is definitely something they should think about heavily).
The best way in Discord is to post in a forum channel like #pages-help or #general-help. There's tooling the community has to actively monitor and reply to those, vs a fast-moving text channel where things can be buried quickly. This is one of the reasons Discord isn't a great platform for offering support.
Community Champs / MVPs have the ability to escalate some things, but posting on HN will always get more attention. We've been raising issues around some things that are impacting lots of people every single day (wrangler.toml + Pages config breaking projects regularly for example), but if you want something fixed quickly, making some noise on social media is always going to be the quickest way, sadly.
Hi. We definitely don’t want anyone to have a bad experience on Discord and are working on a project to improve it.
Please let me know what you think we should improve (either here or email me vmarin@cloudflare.com)
In the past very helpful for different issues. This time around, still helpful but I noticed a lot of (alleged) Cloudflare employees (based on their username colour) were talking at the time and none of them seemed very interested.
I'm interested: jgc@cloudflare.com.
> The easy approach would be to run a string replacement over the build output, but this is far too destructive and error-prone. It would also stop me from writing this post!
Tell me you refuse to learn awk/sed (even Windows compatible versions such as from Git Bash, WSL, or Cygwin) without telling me you refuse to learn awk/sed.
This isn't a solution, because then you'd run into problems the moment those keywords are used in a different context, for example in this blog post describing the bug. Any language you may fancy has a parser readily available these days, there's no reason not to use it.
That is exactly why I used an actual parser not some glorified regex. Thank for you rebutting their ridicilous remark. I even literally said in their quote.
Why anyone would think a glorified regex is a solution to updating deeply nested HTML elements is beyond me, is the famous "HTML regex"[1] answer not enough? As bad a sugesting Chrome should just be a wrapper for sed/awk.
[1]: https://stackoverflow.com/questions/1732348/regex-match-open...
You've invoked the canonical rant: https://stackoverflow.com/a/1732454/2640937
It's been a while since that one's crossed my browser. This is the first time I've noticed the moderator's note at the bottom:
"Moderator's Note
This post is locked to prevent inappropriate edits to its content. The post looks exactly as it is supposed to look - there are no problems with its content. Please do not flag it for our attention."
If you're using a meme to make a point, you should probably just make your point and see if your comment is worthwhile once it's not relying on a rhetorical gimmick.
I'll try: "You could've used awk/sed". Great comment?
