1

I have a <div> of an unknown width (different text can be put into it) which I'm trying to position absolutely and then center using left: 50% and translateX(-50%). This works great except that the box shadow I have applied to the <div> is sometimes blurry.

I suspect this is due to the fact that it does not always have exactly a whole pixel width depending on what text is inside, so when the transform is applied it's falling between pixels and the browser is trying to antialias it.

Check out the JSFiddle here - https://jsfiddle.net/cqky6exx

Any thoughts on how I can resolve this?

3
  • you should add your code to the question so future SO users can see the issue and resolution.
    – alexwc_
    Dec 16, 2015 at 16:38
  • Code is linked to in the JSFiddle. Should it be repeated directly in the issue itself? Dec 16, 2015 at 17:00
  • generally, yes. It ensures that in the future the code/solution will be available for other SO users - you never know if jsFiddle (or whatever site) will shut down.
    – alexwc_
    Dec 16, 2015 at 17:45

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.