One of our webview pages had a strange issue in production. We are using an angular component angularjs-slider on one of our pages. On some of the devices, the width of this component was way lesser than we had defined in our code (around 90% of the width of page)
More analysis revealed that the issue occurred on only pre-kitkat devices. The strange thing was that we were using other controls like normal
label but they were not affected. We tried every CSS tweak to solve this issue but no avail.
And then, I stumbled upon this issue. Turned out that this issue was because of ionic framework. Ionic framework by default uses Flexible Box Layout Module called as
flex in short. As per this
flex is only supported on Android 4.4 and above.
The solution was just a one line change where we override the
display property to
block instead of