html - CSS drop shadow blurry on Mac Retina, clear and sharp on low-res Lenovo display -

html - CSS drop shadow blurry on Mac Retina, clear and sharp on low-res Lenovo display -

i'm using next css apply drop-shadow navigation bar.

.navstyle { background-color: #efefef; /* webkit filter syntax: x, y, blur radius */ -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.5)); filter: url(shadow.svg#drop-shadow); -ms-filter: "progid:dximagetransform.microsoft.dropshadow(offx=12, offy=12, color='#444')"; filter: "progid:dximagetransform.microsoft.dropshadow(offx=12, offy=12, color='#444')"; }

on retina, macbook pro 2013 screen, nav text seem blurry result of drop shadow (pic 1). on attached lower resolution screen (lenovo) text sharper (pic 2). seems counterintuitive me, can provide insight why text looks bad on retina screen?

macbook pro retina display screenshot

low-res lenovo display

html css graphics