Why is my image being distorted (shrunk) in Firefox?

Question

This problem occurs on Firefox. On Chrome all is well.

I have a magnifying glass image next to my search fields.

However, on Firefox the image is being distorted (shrunk) and I can’t figure out why.

Here’s the Fiddle — https://jsfiddle.net/k01jLb28/3/.

Here are the styles I’m applying to my search fields:

*/@media screen and (max-width: 500px) {
  /* line 19, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  body {
    margin: 0px;
  }
  /* line 23, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #container {
    border-radius: 0px;
    background: #ffffff;
    padding: 2px;
    width: 100%;
  }
}
/* line 31, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

ul.nav {
  font-family: 'russo_oneregular';
  letter-spacing: 1px;
}
/* line 35, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

ul.nav li.ui-state-active,
ul.nav li.ui-tabs-selected {
  font-weight: bold;
  color: #000000;
}
/* line 40, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

ul.nav li.ui-tabs-active a,
ul.nav li.ui-tabs-selected a {
  background-color: silver;
  color: #ffffff;
}
/* line 46, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.ui-tabs-panel {
  height: 0px;
}
/* line 50, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#add_form {
  display: none;
  box-shadow: inset 0 0 10px #000000;
  padding: 20px;
  background-color: #f0f0f0;
}
/* line 59, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#headerText {
  font-family: 'russo_oneregular';
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}
/* line 66, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.tab {
  font-family: 'russo_oneregular';
}
/* line 70, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.field {
  font-family: Arial;
  font-size: 11px;
  padding: 5px;
}
/* line 76, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.required {
  color: red;
}
/* line 80, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.errorMsg {
  color: red;
}
/* line 84, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#modalCloseButton {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
/* line 91, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.modal_button {
  border: 1px solid #a8c1d5;
  border-radius: 8px;
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  display: inline-block;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  font-weight: bold;
  color: #FFFFFF;
  background-color: #CEDCE7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#CEDCE7), to(#596a72));
  background-image: -webkit-linear-gradient(top, #CEDCE7, #596a72);
  background-image: linear-gradient(to bottom, #CEDCE7, #596a72);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#CEDCE7, endColorstr=#596a72);
}
.modal_button:hover {
  border: 1px solid #8aabc5;
  background-color: #acc4d6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#acc4d6), to(#434f55));
  background-image: -webkit-linear-gradient(top, #acc4d6, #434f55);
  background-image: linear-gradient(to bottom, #acc4d6, #434f55);
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#acc4d6, endColorstr=#434f55);
}
/* line 113, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.modal a.close-modal {
  display: none;
}
/* line 117, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.noRaceData {
  font-family: Verdana;
}
/* line 122, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchContainer {
  padding: 10px;
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  background-color: tan;
  max-width: 1000px;
  width: 100%;
  display: inline-block;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  box-sizing: border-box;
}
/* line 132, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchContainer h1 {
  margin: 5px 0;
  font-size: 1.0em;
}
/* line 137, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#search-form {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  /*In screen >400px input element will be inline*/
  width: 100%;
}
/* line 143, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#first_name,
#last_name {
  width: 40%;
  /*make the width like event so all the input fields looks good*/
}
/* line 149, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#event {
  width: 100%;
}
#last_name,
#event {
  margin-left: 2px;
}
/* line 158, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#event {
  margin-right: 2px;
}
@media only screen and (max-width: 400px) {
  /*set the max width 400px so they will wrap after the media screen reach 400px*/
  /* line 164, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #search-form {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  /* line 168, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #first_name {
    width: calc(50% - 8px);
    margin: 0;
  }
  /* line 172, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #last_name {
    width: calc(50% - 8px);
    margin-left: 2px;
  }
  /* line 176, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #first_name,
  #last_name {
    margin-bottom: 1px;
  }
  /* line 152, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  /* line 181, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #event {
    width: calc(100% - 35px);
    margin-right: 2px;
  }
  /* line 185, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  input.search_button {
    /* Search-button will be center when meda screen < 400px */
  }
}
/* line 192, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#search_form {
  display: table-cell;
  padding: 0px;
}
/* line 196, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#search_form form input {
  vertical-align: middle;
}
#searchResultsContainer {
  font-family: "Calibre", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  padding: 5px 0px 5px 0px;
  width: 100%;
}
/* line 206, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchResults {
  width: 100%;
  text-align: left;
}
/* line 211, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

.eventNameSearchResult {
  text-decoration: none;
}
@media screen and (max-width: 400px) {
  /* line 216, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  .saveHeader {
    display: none;
  }
  /* line 219, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults th:nth-of-type(3) {
    display: none;
  }
  /* line 222, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults th:nth-of-type(6) {
    display: none;
  }
  /* line 225, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults td:nth-of-type(3) {
    display: none;
  }
  /* line 228, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults td:nth-of-type(6) {
    display: none;
  }
}
@media screen and (min-width: 401px) {
  /* line 234, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults th:nth-of-type(2) {
    display: none;
  }
  /* line 237, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */
  #searchResults td:nth-of-type(2) {
    display: none;
  }
}
/* line 242, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/events.css.scss */

#searchResults thead tr {
  background-color: #000000;
  color: #ffffff;
}

<div id="searchContainer">
  <h1>Search For Events:</h1>
  <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
    <input name="utf8" type="hidden" value="✓">

    <input type="text" name="first_name" id="first_name" value="Dave" placeholder="First Name">
    <input type="text" name="last_name" id="last_name" value="" placeholder="Last Name">
    <input type="text" name="event" id="event" value="" placeholder="Event">
    <input alt="Search" type="image" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
  </form>
</div>

Why not declare a width on the image? `width="45"` Ultimately doesn't answer the question why, but it does work. — Will Thresher, Oct 13 '16 at 20:37
For the record, the magnifying glass looks totally normal on Firefox 49 for Android. It didn't change at all between your fiddle and the revised one in the answer below. — rockerest, Oct 16 '16 at 00:15

score 2 · Accepted Answer · edited May 23 '17 at 11:48

An initial setting of a flex container is flex-shrink: 1 (source).

This means that, by default, flex items are allowed to shrink below their initial size in order to fit inside the container.

For your layout to work in Firefox you need to disable flex-shrink on the image.

Add this to your code:

.search_button { flex-shrink: 0; }

revised fiddle

As to why this is needed in Firefox but not Chrome, I would say that flex layout is relatively new (CSS3) and different browsers have different implementations and interpretations of spec language.

UPDATE

As pointed out by @Oriol in an answer, another initial setting of a flex container is min-width: auto on flex items. This means that a flex item cannot be smaller than the size of its content.

Chrome has implemented this spec instruction. It appears that Firefox has not (at least in terms of replaced elements?), and the flex item is shrinking below the inherent size of the image.

More details here:

Why doesn't flex item shrink past content size?

score 1 · Answer 2 · answered Oct 16 '16 at 00:18

1

The difference is due to the Implied Minimum Size of Flex Items.

Inputs are replaced elements after all, so they may behave differently in various browsers.

In this case, it seems the image in the input determines its implied minimum size in Chrome, but not in Firefox.

If you use min-width: 0 in Chrome, it will behave like Firefox.

You should probably use flex-grow to specify grow ratios, instead of things like width: 100% and then letting the flex items shrink.

answered Oct 16 '16 at 00:18

Oriol

274,082
63
437
513

Yes, that's an important piece of the puzzle. Interestingly, adding `min-width: auto` to the image in FF does not solve the problem. – Michael Benjamin Oct 16 '16 at 11:36

Why is my image being distorted (shrunk) in Firefox?

2 Answers2

Linked