Safari Background Image Quirk

Problem

So it seems Safari (latest version) does not like the following code involving a background image:

div.nav_element.pdf
{
    background-image:url("/images/pdf_icon.png");
    background-position: right 19px bottom 50%;
    background-repeat:no-repeat;
}

<div class="nav_element pdf">
    <a class="nav_link" href="#">Summary of Product Characteristics</a>
</div>

It tells me that my background-position property is invalid via that little yellow exclamation point box. Has anybody seen this before? Does it not like relative sizing?

Problem courtesy of: thatidiotguy

Solution

I ended up having to use this webkit hack:

background-position: -webkit-calc(100% - 10px) center; /* Sf 6 */

as described in this question:

Position a CSS background image x pixels from the right?

as referenced by Artem above.

Solution courtesy of: thatidiotguy

Discussion

because your background-position property is invalid. it have only 2 values, not 4.
read this

Discussion courtesy of: Artem Gorlachev

This recipe can be found in it's original form on Stack Over Flow.