Devices. I hate to be the guy who says it but being a front end developer today is like being a mobile developer back in the days: we need to possess physical devices, or have them around. That’s an investment for what we do.
Thanks to Webflow the differences between devices and the difference between breakpoints are very reduces, but still, to fine tune and provide a good mobile experience, we need devices.
For example I own the last or before the last generation of iPhone (currently a 6S+), but I didn’t sell the 6, the 5 and the 4S. I still have them, constantly plugged on my desk. Along with an iPad 4th gen. Also Android things, NOTE 10 for tablet and Nexus 5P for handset, all bought second hand very cheap, the tablet I found it nude and scratched, no pen, no charger, the phone doesn’t hold the charge. I do apps work too so all those devices are very useful. I also work in a co-working space and that’s great to have a wide range of devices to test on. Everyone’s pretty used to me asking to test on their devices. Half of the people have cheap Android devices and you never know what’s going to happen on them.
So yes all of that is costly. But I think is part of our activity. Like if you’re a delivery guy, at a moment you want to invest in a good bike, and have a spare one. You can live without but it quickly becomes a priority.
Crafting a good, flawless mobile experience takes so much time. Especially to get the sizing of screens/sections right.
In my mind, Flexbox doesn’t represent an issue on mobile. However I’m more scared about it for Desktop Safari and Firefox. As of today I resort to Flex only if I’m obliged and I test it a lot from the beginning. For clients who have offices with Windows machines and IE, I don’t even bother thinking about using Flexbox. I can’t be in the position of telling clients “Please update your software” (IE, Windows), not my business, and it’s an impossible task.
Interesting, that’s not what I’m dealing with usually, or maybe you’re talking only about Flex.
I d’n’t know about buggy. Edge is the only IE line that allows us to use modern XSS things. Everything under doesn’t bug, it’s just not supporting that much of modern CSS.
Yes because that’s the platform that’s supposed to bug the most. I always test Firefox Windows with fear. Because sometimes results are different from all other browsers and it’s very difficult to fix. Usually some defaults parameters applied and it’s long to find where it applies.
Jeremy do you have an example of things going nuts in mobile Safari that you can share? Both public link and production link. I have an iOS phone with me and can test.
Also one thing: when facing a Flexbox bug, instead of clicking everywhere to try to fix it, try to “prove the concept”. Use a blank new site, recreate the Flex structure in the most cleanest way possible and test it again on mobile, see if it bugs, and if it’s not, rebuild your flex thing on your site from scratch trying to simplify things.
Also try not to put too many properties on the same element. For example don’t over style a flex container. Don’t give it position properties, don’t dimension it. Nest it in a div and apply all the non flex properties to this div.
When layout bugs, nesting your layout more and separating properties among layers is what can fix your issues.
) to check your preview links sorry.