Safari Background Image Quirk


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

    background-position: right 19px bottom 50%;

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

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


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


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.