We are implementing a CSS media query to adjust styles for mobile devices, specifically increasing the height of select elements for easier selection. Here is an example:
@media only screen and (max-width: 599px) {
.mySelect {
height: 40px;
}
}
When resizing the browser window, you can observe the select element expanding and shrinking accordingly in Chrome and Firefox, but not in IE9. In IE9, the text gets cut off when the select element shrinks back down. You can view this issue in action on this fiddle: http://jsfiddle.net/7cVbx/. Screenshots illustrating the problem are provided below:
Initial state:
After reducing window size:
After restoring the window width:
I noticed that setting the height of select elements outside of the media query resolves the issue (as shown in the commented part of the fiddle). However, I'm hesitant to apply this solution as it may lead to excessive white space or text cutoff in different browsers.
Is there a more effective approach to handling this? Or should we stick to explicitly defining the height outside the media query to ensure compatibility with IE9?
NOTE: Changing the Browser Mode in IE10 does not replicate this issue; it solely occurs in the actual IE9 browser.