Strange blurring rendering issue

Hi there,

I have encountered a strange issue which is rendering parts of my website in a blurry way. I never noticed this before after Windows decided to restart itself and do an update!

This is an example:

As you can see the 1px border around the button becomes blurry a little way in from the left and the text is also blurry.

Does anyone know what could cause this? I have not changed any setting on my PC. The above screenshot is in from Chrome. FireFox seems to be ok.

Thanks!

Without seeing any HTML or CSS I can only guess. But it looks suspiciously like a list item where the “marker” area is unaffected.

What does your dev tools show as the CSS for that element?

The CSS from the button in the screenshot is:

.item a.btn-primary {
    background: #ec574b;
    color: #fff;
    font-size: 16px;
    padding: 15px 30px;
    display: inline-block;
    margin: 15px 0;
    text-align: center;
    -webkit-box-shadow: inset 0px 0px 0px 1px #fff;
    -moz-box-shadow: inset 0px 0px 0px 1px #fff;
    box-shadow: inset 0px 0px 0px 1px #fff;
    transition: all 0.3s ease 0s;

I’ve checked in Chrome on another PC and it seems fine. As far as I remember, it didn’t render like that before as I would have noticed something like that when coding it.

Have you tried removing elements of your CSS one at a time to see if that makes any difference, eg the box-shadow and transition? I don’t know why it should make a difference but could be worth a try…

Have you thought of swapping the box-shadow for a 1px border or outline? That appears to be the kind of effect you are trying to make with it.

Ok, I’ve tried removing the box-shadow and transition on it, but still no difference.

I’ve also noticed its on some other elements.

You can see that the “e” on the left is sharper than the “e” on the right. Also on the sub heading it becomes more blurred to the right of the sentence.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.