Issues with flex on ios versions below 9.2

<h3 class="entry-title">Issues with flex on ios versions below 9.2</h3>
Posted on

Tags css


Recently I inherited an iPad 2 and it has opened my eyes to a wide range of problems in the css that I have written on my personal sites as well as the limitations that can be imposed by the version of an OS ( in this case the iPad is on v8.2 )

A google search for the device with a quick description of the problem and related css attributes turned up a handful of posts explaining the need for prefixes.

Although I'm sure it is not too difficult to configure, I was not in the mood to setup  a gulpfile to compile scss to css to handle the generating the prefixes so I turned to google; one of the top results was this project  https://autoprefixer.github.io/ . It's nice because you can control the number of major versions back to include only the necessary prefixes that you want.

The two major css properties that I use often and have been observed misbehaving on this older device are: transform and  flex

 

 

Example of Autoprefixer CSS tool generating the prefixes for the last 10 versions.

 

Using the tool is great if you do not have many attributes that need their prefixes included, however in the future I would consider using something like Gulp Autoprefixer or SCSS Mixins

 

 

Update! There is a small javascript librarby, prefixfree, that one can add to their site (ideally right after the stylesheets are loaded) and the library will append the necessary prefixes for the browser detected. No need to add them yourself!