In the attached test-case, the presence of the
.icon div (among other potential things) seems to lead to Firefox and Chrome defaulting to different widths for the
input element (which has
Chrome renders it as widely as possible, while Firefox seems to ignore its 100% width.
Firefox will render it as widely as possible if I add
width:100% to the form element, or remove the
Chrome makes the input element as wide as possible unless I remove the
display-table-cell properties or the
width:auto on the
As such I'm not sure which layout component to file this under.
Whatever is causing this, Loblaws' mobile search bar is being crammed to the right edge of the viewport in Firefox because of it.