Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Carousel displays blurred images

    Bug Reports
    5
    7
    921
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      anfaernandes last edited by

      Hi! I have noticed that on this specific project: http://anfaernandes.com/1-0-1
      (password: ana).

      The pictures appear blurred with the carousel add-on. This is especially dramatic in Safari, but also seems to happen with other browsers as well. I have looked it up here and it seems that adding this code will fix the issue.

      filter: none;
      -webkit-filter: blur(0px);
      -moz-filter: blur(0px);
      -ms-filter: blur(0px);
      filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');

      The thing is: where should I add it? I think it has to be in the core code of the theme.

      Does anyone have thoughts on this?

      Have a great day,
      Ana

      1 Reply Last reply Reply Quote 0
      • arminunruh
        arminunruh Global Moderator last edited by

        Hey!

        I have checked the images and they seem a bit small:
        http://anfaernandes.com/wp-content/uploads/2017/01/101_6_WEB.jpg

        You can try to upload bigger images.
        As an alternative you could try to use this option:

        "Lay Options" -> "Lay Options" -> "Never show resized versions of your images"

        1 Reply Last reply Reply Quote 0
        • A
          anfaernandes last edited by

          Hi! Thank you Armin!
          I'm not sure it helped that much, but I might be being a bit picky.
          I also tried to upload larger pictures, but it didn't seem to do much good and only made the site slower.

          Best,
          Ana

          1 Reply Last reply Reply Quote 0
          • B
            bueroch last edited by

            Hello Armin,

            I am having the same troubles within the carousel theme.
            As Ana says, it is a difference between safari and firefox.

            I activated "Never show resized versions of your images"
            But still.. Safari is blurry, firefox is sharp.

            http://buero146.ch/nathalie-pellon/

            We do have some smaller images uploaded. But this specific one is new and definitely in bigger size.
            And since we want to optimize the other projects as well, we'd be curious to see it working in advance.

            Do you know what it could be?
            Or what we could do?

            Thanks a lot in advance!
            Maike

            1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Hi Blueroch!

              This is a well known issue with Safari.

              Safari sometimes makes images blurry when it scales them.

              I have attached a screenshot of the image in Chrome, Firefox and Safari:

              0_1491923034153_Bildschirmfoto-2017-04-11-um-16.59.12.jpg

              Have a look here:
              http://stackoverflow.com/questions/27060690/webkit-transform-scale-blurry-images

              You can add this solution to your custom CSS.

              Can you let me know how it went?

              All the best!

              Marius

              www.mariusjopen.world

              A 1 Reply Last reply Reply Quote 0
              • A
                Antfab @mariusjopen last edited by

                @mariusjopen
                Hi!
                I have the same issue where images included in a carousel are blurry on Safari. I tried to include the «  reset the blur filter » code shared above in the custom CSS for Desktop Version but it doesn’t work. There seems to be an error when I write the code (red cross + error message when hovering on the cross icon > see image attached)
                I would love to hear if someone could actually fix that problem with that code.
                Thank you in advance!
                Best

                Anthony

                0_1494335909338_Capture-blur.jpg ).

                1 Reply Last reply Reply Quote 0
                • mariusjopen
                  mariusjopen Global Moderator last edited by

                  Hi Antfab!

                  We will look into this!

                  It more seems like a browser compatibility thing which we face here. We try to fix that issue in the coming updates.

                  All the best!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post

                  Try this to fix issues before you post:

                  Use the Search Feature. Maybe there is already a solution to your issue.

                  1. Update Lay Theme and all Lay Theme Addons
                  2. Disable all Plugins
                  3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                  4. Now see if your problem solved itself
                  5. Go here, see if your problem is listed here:
                  Troubleshooting

                  When you post:
                  1. Post a link to where the problem is
                  2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                  Thanks!

                  Online Users

                  A
                  H
                  T
                  M
                  L

                  Recent Topics

                  • T

                    Video is played differently

                  • A

                    Broken images

                  • L

                    Hide mobile menu, when scrolling down

                  • J

                    Imagehover addon show mouseover state

                  laytheme.com