The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS google chrome display content fuzzy and blurred

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #241070

    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
    vs other browsers

    • 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 .


    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.


    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.