Dave Dave - 1 month ago 10
CSS Question

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

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>




Answer

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.