Giters

LeaVerou / stretchy

Form element autosizing, the way it should be

Home Page:https://stretchy.verou.me/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Crossbrowser inconsistencies with the <select>-element

petetnt opened this issue · comments

commented

Some inconsistencies I saw when comparing the <select> examples across browsers (as customized ones are always pain in crossbrowser uses) (in order: Chrome 44.0, FF 39, IE11):

image

image

image

  • The initial state on Chrome looks great, but the texts on the dropdown are nearly unreadble
  • On Firefox, it nearly the opposite: the dropdown looks great (sans the beveled borders) but the default state of the box is clipped
  • IE11 showcases the same text thing than Chrome, but with different color ::hover. The box doesn't scale itself when selecting a value, as measuring the dummy throws an error:
 Unable to get property '0' of undefined or null reference

        else if(type == "select") {
            // Need to use dummy element to measure :(
            var option = document.createElement("_");
            option.textContent = element.selectedOptions[0].textContent; //selectedOptions here is undefined, it doesn't seem to be supported on IE

Otherwise looking great 👍

commented

Is the IE11 issue fixed?

Regarding texts being unreadable, that’s an issue with the website styling, not Stretchy (still useful to report though!)

commented

Using options[] with element.selectedIndex works great, so the sizing issue is fixed 👍

However, cs[appearance] is undefined on IE11 in stretchy.js#L105, which is why it doesn't account for the 2em for the arrow which leads to this:

image

The equivalent of appearance: none; for IE10/11 is:

select::-ms-expand {
   display: none;
}

But you can't really test for it (same way you can for the appearance property). I think it would be a safer bet to account for the arrow regardless if it was there (and then remove it if you can safely say that it isn't there).

commented

Thanks! Is it fixed now?

commented

It is, at least on IE11 Mobile 👍