Columns Float in RTL

[jeffredodd]

Having issues with columns not changing direction when using dir='rtl'. It appears that columns still render in an left to right fashion with their content being successfully rendered in right to left.

This issue appears only on IE10. In IE11 this is not an issue. I have debugged the issue in IE10 and IE11 and don't anything from a content perspective from my site that could cause this issue.

Thanks for looking into this.

[kylezinter]

Hey Jeffrey D Johnson (@jeffredodd), thanks a lot for mentioning this. I just tried testing this with our demo site http://msdotcom.azurewebsites.net/Grid/ on browserstack (win7 with ie10 and win8 with ie10) and it appears to be working correctly. I'm unable to repro. Any other specifics you might be able to provide me with? Can you try the demo site and see if it is working correctly in your environment? If it is not then maybe it is an implementation issue.

[jeffredodd]

Thanks for looking into this Kyle. It appears that this is part of the missing Flex functionality inside of IE9 & 10. When RTL is detected on a page, all elements inside a element with display:flex that float left are reversed to float right in most browsers. In IE9 & 10 the Flex features had not been fully implemented and this is why we are seeing elements float inconsistently.

Example when dir="rtl", the boxes below represent behavior of .col-1-4 items:
IE10: [1] [2] [3] [4]
IE11: [4] [3] [2] [1]

Thank you for following up on this issue. You can change the status of this bug as this issue lies within the browser itself.

-Jeffrey