-webkit-box-shadow does not change properly with javascript

Question

I have the following code:

var oneHeight = Math.ceil(0.012*window.innerHeight).toString()+"px"; var usboxshadow="0px "+oneHeight+" 0px rgba(0,140,255,1), 0px "+oneHeight+" 25px rgba(0,0,0,.7)"; console.log(usboxshadow); $(".unselected").css("-webkit-box-shadow",usboxshadow); 

When I output usboxshadow to the console, I get what I should:

 0px 20px 0px rgba(0,140,255,1), 0px 20px 25px rgba(0,0,0,.7) 

(property -webkit-box-shadow)
However, when I return the property using jquery.css (),

 console.log($(".unselected").css("-webkit-box-shadow")); 

I get a completely different result:

 rgb(0, 140, 255) 0px 20px 0px 0px, rgba(0, 0, 0, 0.701961) 0px 20px 25px 0px 

First, where did the extra 0px in each of the arguments come from?

Secondly, why rgba alpha (opacity) 0.701961, when should it be 0.7?

Please tell me what I did wrong.

Edit :

After running the code, the shadow of a block of elements with an unselected class is not displayed.

Answer 1

[ Updated for the second question, see below. ]

1) In CSS, you can specify box-shadow using two, three, or for pixel values. The first two x, y offsets , the other two are the propagation value and the radius . See MDN for more information .

When you set a CSS rule (using CSS or jQuery), the browser automatically places the full values ​​(in this case, four px values). That's why you get additional results when setting up using jQuery: the latter is set by default in the browser (see the calculated panel in the Chrome inspector: it shows you values ​​that you do not need to set, because they are standard).

2) .7 or .701961 is not much different. I think your code seems good, but sometimes conversion problems may exist in floating point numbers (= decimal numbers). I think the way a computer stores a decimal number may vary depending on various complex criteria. See fooobar.com/questions/94351 / ....

I think you should not worry about this. There may be a way to force conversion to JS or jQuery. I can not say more.

Hope I can help. :)

Update

Here are the experiments on JS Fiddle (updated version than my comment on this answer). The problem arises from var oneHeight = Math.ceil(0.012*window.innerHeight).toString()+"px";

I did not pay much attention to this (sorry), but that returns window.innerheight height of the window. Therefore, the offset y of the shadow will depend on the size of the browser window. That is why we get a completely different shadow.

Again, I have no other explanation for the decimal problem. ^^