Css Paper effect not working in FireFox

Question

I created a div that gets dynamically populated with javascript that has a background that resembles a piece of notebook paper. This works in safari and chrome but for some reason doesnt render correctly in firefox. Can anyone give me some insight on whats wrong with my styling ?

This image is of chrome and safari.

Working Effect (chrome ie safari etc..

This image is of Firefox. Broken paper effect

Here is my html and css

<div id="paperBackground" class="col-sm-6 paper">
   <h3 style="text-decoration:underline;"><i>Shopping List<i></h3>
   <div class="multiOrderList">
     <p id="list"></p>
   </div>
   <div style="clear: both;"></div>
 </div>

.paper{
  width: 100%;
  min-height: 175px;
  height: 100%;
  border: 1px solid #B5B5B5;
  background: white;
  background: -webkit-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
  background: -moz-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
  background: linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
  -webkit-background-size: 100% 30px;
  -moz-background-size: 100% 30px;
  -ms-background-size: 100% 30px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

+Bonus for ie compatibility

Have you thought about making a small thin image and repeating it? It would offer much more compatibility. — im_benton, Mar 10 '14 at 16:12
I was considering a slice. This is actually built on twitter bootstrap specifically for mobile.. Didnt know if the slice would be better or just css as far as performance on phones — JayD, Mar 10 '14 at 16:13
@enguerranws your fiddle renders the same exact way my image is showing for firefox ... — JayD, Mar 10 '14 at 16:16
that wasn't an answer, just a comment to help other users to see your problem with a live example. — enguerranws, Mar 10 '14 at 16:17

vals · Accepted Answer · 2014-03-10T17:53:23.843

3

You are missing the unprefixed version in background-size:

-webkit-background-size: 100% 30px;
-moz-background-size: 100% 30px;
-ms-background-size: 100% 30px;
background-size: 100% 30px;     // !!!

fiddle

and for the bonus, added -ms-linear-gradient (and changed unprefixed data)

background: -webkit-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: -moz-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: -ms-linear-gradient(top, #848EEC 0%, white 8%) 0 57px;
background: linear-gradient(to top, #848EEC 0%, white 8%) 0 57px;

fiddle2

edited Mar 10 '14 at 17:53

answered Mar 10 '14 at 17:47

vals

61,425
11
89
138

In fact, `-ms-`prefixed lines are not much needed. All shipped versions of IE10+ support unprefixed syntax, and IE9 doesn't support CSS Gradients at all. Only early betas of IE10 needed `-ms-`. – Ilya Streltsyn Mar 10 '14 at 20:52
@IlyaStreltsyn Yes, I included it mostly to be coherent with having -ms-background-size. Fixing the syntax error in the linear-gradient (changing *top* to *to top*) was enough to make it work – vals Mar 10 '14 at 21:09
As http://caniuse.com/#feat=background-img-opts reports, IE9+ has full support of background-size etc., so `-ms-`prefixing them can also be redundant – Ilya Streltsyn Mar 11 '14 at 07:47

score 2 · Answer 2 · answered Mar 10 '14 at 16:18

2

I have spent countless hours trying to get nice css styling to work in various browsers. Sometimes the best solution is the most simple one. If you just repeat a thin image of the notebook lines (1px by 10px for example), it will cut down a lot on the headache and work in all browsers.

#paperBackground {
  background: url('images/notebook_lines.jpg') repeat;
}

answered Mar 10 '14 at 16:18

im_benton

2,541
4
21
30

1

I agree, keep it simple if possible. Here's a ready-to-deploy version which is slightly less compatible, but avoids referencing an image: `background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gMKEDc1Fm+KLAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAFklEQVQI12OYt+z9f4ZL137+ZxhEAADblwbTE4dKKAAAAABJRU5ErkJggg==);` – Tewr Mar 10 '14 at 16:59

score 1 · Answer 3 · answered Mar 10 '14 at 16:16

This background pattern is made by Lea Verou, this may be what you're looking for (works on all recent browsers): http://lea.verou.me/css3patterns/#lined-paper

.paper{
  width: 100%;
  min-height: 175px;
  height: 100%;
  border: 1px solid #B5B5B5;
  background-color: #fff; 
background-image: 
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
  -webkit-background-size: 100% 30px;
  -moz-background-size: 100% 30px;
  -ms-background-size: 100% 30px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

Thanks, This is similar but will require some tweaking. – JayD Mar 10 '14 at 16:21 — JayD, Mar 10 '14 at 16:21
Sure, that will be more interesting for you ;) – enguerranws Mar 10 '14 at 16:23 — enguerranws, Mar 10 '14 at 16:23

score 1 · Answer 4 · answered Mar 10 '14 at 17:50

The syntax of CSS gradients has changed: the direction of the gradient now must be specified as 'to bottom' instead of just 'top'. Also, there is probably no need in -moz-prefixed version now because the standard syntax has been supported since Firefox 16.

Css Paper effect not working in FireFox

4 Answers4