What happened to my text shadows in Google Chrome?

Question

So I have a simple style here the previous Chrome provided it just like FF - like this

and suddenly I look at my document in chrome and see this

not transparent in all shadows = (What to do with tham - how to fix it?

My CSS code is :

body{padding: 5px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif} h1,h2,p{margin: 0 10px} h1,h2{font-size: 250%;color: #FFF; text-shadow: 0px 1px 1px #000;} h2{font-size: 120%;} div#nifty{ margin: 0 1%;background: #9BD1FA} b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} p{color: #000;text-shadow: 0px 1px 1px #fff;padding-bottom:0.3em} input[type="button"], .eButton {width: 150px;padding: 5px 10px;word-wrap: break-word;height: auto;}} ::-moz-selection { background-color: #fbfdfe; color: #ff6c24; text-shadow: 0px 1px 1px #258ffd;} ::selection { background-color: #fbfdfe; color: #fff; text-shadow: 0px 1px 1px #258ffd;} 

Answer 1

If you are looking for translucent shadows, you can try using rgba values ​​instead of hexadecimal values. So it will be:

 h1 { text-shadow: 1px 1px 1px rgba(0,0,0,.20); } 

where the first three numbers are the RBG value (red, green, blue), and the fourth is the opacity (0 to 1). Thus, the above example is black with an opacity of 20%.

Also, the weird weight of the shadows seems to come from the blur value on text-shadow . When I change it to 1px 1px 0 , it gives a more even shadow than 0px 1px 1px . I do not know why.