google chrome display content fuzzy and blurred

[MT]

recently i run through a strange problem,
i’m creating a modal but when i show the modal using javascript ( jQuery ) it appear blurred in google chrome while looks fine in firefox and Microsoft edge.
here you can see my code for the modal

.overlay {
    display: none;
    background-color: rgba(0, 0, 0, .8);
    cursor: pointer;

    @include position( fixed, 0 0 0 0 );
    z-index: 666;

}

.modal {

    display: none;
    background-color: $white;
    overflow: hidden;

    border: 1px solid shade($th-light-bgcolor, 10%);
    border-radius: 5px;

    @include position( fixed, 50% null null 50% );
    @include transform( translateY(-50%) translateX(-50%));
    z-index: 999;

}

and this is how it’s look in google chrome
http://i.imgur.com/9h92hww.jpg
vs other browsers
http://i.imgur.com/pXSw3zP.jpg

• the image is blurred too !

i tried many ticks such filer: blur (0) / translateZ(0) … but no one slove the problem !

note that every thing looks right outside the modal .

[Senff]

I’d suggest to play around a bit with the font-size, increase it a bit or something.

Without seeing it in action (and only going by screenshots), there’s not really much more I could suggest.

[MT]

i found what cause the problem :
when an element in the same page of the modal use this keyframes

@include keyframes(spin-1) {
  from {
    @include transform(rotate(0deg));
  }
  to {
    @include transform(rotate(360deg));
  }
}

this strange behavior happen
and here is a live example
http://codepen.io/anon/pen/MyPQmX

[Author]

Posts