During the process of resolving my issue, I accidentally discovered a solution - but I always prefer to understand the fixes I apply.
<ul>
<li><img src="something.jpg" /></li>
<li><img src="somethingElse.jpg" /></li>
[+12 more <li>'s]
</ul>
Here are the CSS styles that I believe are relevant:
ul {
position: absolute;
list-style-type: none;
top: 0;
left: 0;
}
li {
position: relative;
height: 900px;
width: 500px;
float: left;
}
img {
display: block;
margin: 0 auto;
}
The issue arises when applying a transition that shifts all images to the left, like so:
ul {
left: -3000px;
}
This transition functions correctly in most cases, except for ios 5.1, where it sometimes works and other times reverts back to displaying the last image set (e.g. first image or an intermediate image).
Surprisingly, adding this line of CSS resolves the problem:
ul {
-webkit-backface-visibility: hidden;
}
Although this solution does not seem intuitive to me, it effectively eliminates flickering during transitions.