I'm having a serious issue here trying to develop a hybrid application on iOS. The problem is that I use flex-direction: column-reverse in order to show replies in a message. Everything works fine but I need the translate3d or translateZ hack to get the replies updated when an event is received. Anyway, I do that, everythings fine as well but.. when I enable the -webkit-overflow-scrolling: touch, the content goes crazy. Everything's fine but the content is positioned wrong. If I change flex-direction: column-reverse to flex-direction: column everything is fine, but then I want the order in the exact other way ( and this way I benefit from the "always bottom" positioning when new message is received as well ).
If you have an iOS device, please check http://edi.srl/ios.html :: it's easier to see here than on jsfiddle. Go on landscape orientation and see what happens with the positioning of the "replies".
- If I switch
flex-direction: column-reversetocolumn, everything is ok but then the layout is not how I want it. - If I remove the
translate3dortranslateZoption, everything is ok as well, but the updates are not rendering ( unless I scroll the elements out of the viewport so they can get re-rendered ). - If I remove
-webkit-overflow-scrolling: touch, again, everything is fine, but then the scroll would be really really weird to deal with as you probably know.
Any ideas ?
