Streaming live at 10am (PST)

Best practice for safari and ios


#1

I have been working on webflow for nearly a year now. It has been a huge learning curve but I keep running into the same issue with mobile phones. Specifically IOS. Is flex-box buggy with ios? I get some of the weirdest outputs. This frustration is compounded by the fact that I don't have a latest device to test it on and sites like mobiletestme don't show me any problems. But I usually hear from clients that is looks odd on their device and I get screenshots of what appear to be divs overlapping and on top of each other. Then I basically guess what I might have missed of how to fix the issue, essentially flying blind.

What do you use for IOS issues? Is there a better testing platform than mobiletestme that is worth a subscription or does nothing beat an actual test device. I am debating just buying a used Iphone 6 just to test with. Do you put a script in to take care of these issues? Or do you turn flex box off completely for mobile? I have adopted the practice of using % or VH and Em instead of PX for Text.

I have a samsung S6 and when I test mobile on it. It is great but IOS is a major pain. That and microsoft explorer but edge seems to be less buggy. So I don't design for explorer really. Do you test for microsoft explorer anymore?

I appreciate any insight and best practices you use for every project to avoid these issues.

thanks
Jeremy


#2

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.


#3

Thank you for your very thorough response, Vincent. The issues I have with IOS I think are flex and related to flex and positioning. I removed flex from my current project for mobile and it seems to be working now. Yes, as I thought investment in a device is probably a good idea. I have a few really old devices to test things on. But I need to grab a few more newer used devices for testing.

Yeah my Samsung works great and the mobile responsive features always seem to work perfectly on it regardless of chrome or the regular browser.

I think part of my shortfall is sometimes overloading elements with properties. Then if I have issues with them, I trying to figure out what property will help fix the error. Probably an unwise way to build

Do you have any recommendations for books or articles on structure I can drill into my brain? I've been picking up things very much piecemeal by trial and error.

https://preview.webflow.com/preview/operationferriswheel?preview=14a18536d43c6df2bc60be622dd47ac3 is the share link.

I will keep this response handy and I guess I need to test more on IE for the time being at least.

an IE 11 thing I've noticed for my own site is that the font icons I loaded don't show up in IE 11. IS there a way around this or do font icons just not work with IE. They work fine in edgle. The only edge issue I have is a stutter on the fixed header. It's annoying but not the end of the world.

https://preview.webflow.com/preview/truereflectionmedia?preview=85b2e1b96c39f93ed1f96bf2a50cb861

and the What We Do section is horribly garbled.

I saw suggested that some people use web-kit script but the problem I guess becomes when a new browser or update happens it can change things all over again.

you have given me lots to mull over and add to my testing regimen.

thanks again. Much appreciated


#4

I never witnessed a difference between the two. I always assumed they were the exact same browser, the generic one being a white labeled Chrome view, probably for legal purposes (remember when MS had to deconstruct IE from Windows over market dominance issue).

Technically, there is no reason for this to be a problem. Historically, we learnt to nest and separate. In Webflow or when I write manual code, my strategy is the following:


  • the semantic container: that's what HTML wants to see. Is it a section, an article, a form? The semantic container gets a unique ID, but not necessarily a class name. In Webflow, this could be the Section object.
  • the grid container: that's the container placing the content in the grid. It gets a class name, dimensions and an aligning method, centered most of the time. In Webflow, this could be the Container object.
  • the Node container: that's the conteiner you'll use to move your piece of content. From a grid container to another for example. Getting this element insure you you get the content with all it's formatting, but not the formatting of the context. You should be able to pass this object from a main column to a side column and still get a nice result. The object as a class name but no CSS properties other than background-image/video or color/gradient.
  • the spacing element: everything margin, padding that you need for you content gets here. Everything addressing hte size and position of the content with the context. Nothing else.
  • the object: this last one define the style of the object, but not it's alignment or anything in relationship with the context. Ony local properties.

No, not at the moment. I am working on a blog post for http://inb4.webflow.io that will address everything about HTML5 tags, recommended structure and strategy of naming classes. It's as much to help people than to define and summarize a strategy for myself. So I am in the process of ready and finding articles. This piece should come within 2 weeks.

Icon fonts and IE... there are solutions for IE8 and 11 when things don't work, but honestly I prefer not to do icon fonts. Icon fonts are the almost assurance than none of your icons will ever render pixel perfect. We have SVG, that's way better than icon fonts. I reckon that changing the color on the fly is great though.

I am on the go today and don't have an comfortable enough workstation (read: I'm on iPad :slight_smile: ) to check your preview links sorry.


#5

This topic was automatically closed after 60 days. New replies are no longer allowed.