I was browsing the Svelte docs on my iPhone and came across a blaring UI bug. The notch in the REPL knob was totally out of whack. I’m always looking to contribute to open source, and I thought this would be a quick and easy fix. Turns out, there was a lot more to it than just changing one line of CSS.
Replicating, debugging, setting up the local environment was interesting, difficult, and meaningful.
The issue
I opened my browser DevTools, thinking I’d see the same issue in the phone view. But, the bug wasn’t there. Now this is a seriously tricky CSS problem.
? What I learned
If you’re using Chrome on iOS as your browser, you’re still using Safari’s renderer. From Wikipedia:
Chrome uses the iOS WebKit – which is Apple’s own mobile rendering engine and components, developed for their Safari browser – therefore it is restricted from using Google’s own V8 JavaScript engine.
This is backed up by caniuse, which provides this note on iPS Safari:
Now it’s clear why the issue wasn’t showing up on my machine but it was showing up on my phone. Different rendering engines!
Reproduce the issue locally
I pulled down the project and ran it locally. I confirmed it was still an issue by running the local code in a simulator as well as on my actual iPhone. Safari on macOS has an easy way to open up DevTools instances of each one.
This provides access to a console just like you would in the browser but for iOS Safari. I’m not going to lie, Apple’s developer experience is top notch (see what I did there? 😬).
I’m able to reproduce the issue locally now.
? What I learned
After pulling down the Svelte repo and looking around the code a bit, I noticed the UI and SVGs were being pulled in via a package called @sveltejs/site-kit. Great, now I need my local version of site kit to get pulled into svelte/site so I can see changes and debug the issue.
I needed to point the node_modules in Svelte’s package.json to my local copy of site-kit. This sounded like a Symlink. After looking through the docs without much luck I Googled around and stumbled upon npm-link. That let me see what I was doing!
I can now make local changes to site-kit and see them reflected in the Svelte project.
Solving the issue
Seriously, all this needed was a one-line change:
border: transparent;But locating where that one line should go was not as straightforward as you’d think. Source maps on the project are still a little rough around the edges and are showing this CSS coming from the Nav.svelte component when it was really coming from another file. That would be another great way to contribute to the project!
Then you search around and learn that this is being handled and you learn a little more about how it’s done. Everything now looks great on mobile and desktop.
Let’s rewind
What started as a quick, one-line change became a bit of a journey. I had to:
- Run the project and component repositories
- Learn about system linking
- Contribute documentation about lining to site-kit
- Learn about different browser renderers
- Learn how to emulate an iOS Safari browser
- Learn how to get access to its debugger
- Find the issue when source maps weren’t working correctly
- Fix the issue (finally!)
Working on your own, you normally don’t get to deal with issues like this, or have a large complex system you need to build a mental model of and learn. You don’t get to learn from maintainers. Most importantly, you don’t see all of the hard work that goes into building a popular technical product.
When I submitted this idea to CSS-Tricks. Chris said he had recently dealt with a similar situation. Difficult learning is durable learning. Embrace the struggle.
Never stop learning
I grabbed another issue from the Svelte project and now I’m learning about CSSStyleSheet because there’s another issue (I think), with how Safari handles keyframe animations within stylemanager.ts. And so the learning continues down paths I never would have trod in my day-to-day work.
When something breaks, enjoy the journey of learning the system. You’ll gain valuable insights into why that thing broke and what can be done to fix it. That’s one of the awesome benefits of contributing to open source projects and why I’d encourage you to do the same.
That’s why I don’t want to work in teams. This overhead of tools and systems is depressing.
I can hear Chris Coyer saying “technical debt” :).
I ran into a bug on Safari a while ago in that changing just the animation-play-state property rather than declaring the full animation property caused animations to fail to render about half of the time. Could be worth looking into whether Svelte’s animations are structured this way with regards to the issue you mention at the end of the article. Good read!
I’m curious about how you ran your local code on your iphone. I’ve forked a repo and run it on a local server on mac os, but I have no idea how I would copy that code onto my iphone for testing. Or launch it. Thanks (I’m a newbie developer)
If you have a wlan at the place you are working on the project, you can access anything over it, it would go smt likethis: ip of the pc you are developing stuff on/port number. You would have to make your PC discoverable in network settings and check what is your PCs IPv4.
One way is to configure the local server to serve traffic over you local network and just go to the IP address of your machine on the phone.
Another way is to simply use ngrok (or a similar tool) where you can point it to your local port and that gets proxied over the Internet where you, again, open the page on your phone. Such tools benefit in a way that anyone can access your site if you want to showcase it to someone outside of your network without the need of an actual server.
If you have a local LAMP stack set up, you can visit the IP address of your computer (where the code is being hosted) on your iPhone and you should be able to view the website / app.
If you have Android, you can do the same and even connect the phone via USB to the computer and use the Chrome debugging tools on the computer to debug on your phone.
Oftentimes, I work with systems like WordPress where it uses htaccess rules that don’t allow me to view it from a local network, so I don’t use this trick to test on actual devices and debug. However, when working on such projects, the needs aren’t really as complex as to require such amount of specific debugging either. :)
border: transparent;implicitly sets the border-width to 0px and border-style to none. That’s why this works. The transparent color doesn’t actually factor in at all since the border-width is 0. Because of this, I’d sayborder: none;is a more clear fix.That said, good work contributing to open source! Getting a local environment set up is rarely easy.
Bugs in Safari you say..
This. Safari is quickly becoming the new IE. I hope you opened a bug for Safari.
And good luck ever being able to do what this article states while using a Windows machine. Top notch debugging? More like special debugger for their special software, using their special hardware, causing trouble. Just like Microsoft has done with IE lack of support over the years.
This seems like a case study in the unwarrented complexity of modern build processes. I can’t believe how much devs want to endure countless hours of dev-ops torture to save a couple lines of code.
Great post. Thanks for sharing how you contributed to an open source project. I’m looking to start contributing too, so this was helpful.
Great article! I am inspired to start contributing to open source software like this!
Thanks for this very informative article. I always felt like to participate to an open source project, one had to help with “real programming”. Even if it is not a project’s focus, design is an important part of every open source project. Open source apps’ UI have to be beautiful and satisfying to use too.
I’m looking at the apps I currently use to see where my frontend skills might be needed.
Pretty dedicated to get to the bottom of this. I’m no coder so for me lots of fixes is always a hustle. But this was quite interesting to read. Especially the hustle to get the simulation part working properly
This kind of bugs are really disgusting, however thanks for sharing your experience ❤️
The problem of difficulty is a deficit of the tools at our disposal, which continues to lag further and further behind browser technology development. Errors like this one should be automatically detected and awareness of it should be elevated for the original developer during the original development process
very interesting, why transparent settings have width ?
It’s not
transparentthat sets width to none. Using just the color in the shrothandborder: transparentdoesn’t set a border-style, so it gets the default value, which isnone.See note in Syntax section: https://developer.mozilla.org/en-US/docs/Web/CSS/border
Great article! I often encourage new junior developers to contribute to open source, because it’s a way to show that they’re “more professional” than other junior candidates … and this article explains exactly why!
It takes a lot of work even to make just a one-line change to an OSS project, and that’s why if an employer sees that you were able to do that work, they’ll be more confident that you can do the work they need for the job.
Great find! Any suggestions for a Windows 10 user who has no access to a Mac on solving iPhone CSS issues in Safari?
I have tried a few online emulators but they’re not very robust. Would you recommend going the VM route?
I guess the bug was on Safari side, and not on the side of a web app. Anyway, if the border is not set in the CSS explicitly, I guess it should have the default value.
But maybe it is just different property inheritance logic, so I guess someone can check the web standards and find out, which implementation of the two is correct.