Lay Theme Forum

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

    CSS transform on .category-link causes thumbnails to disappear

    Bug Reports
    2
    3
    792
    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.
    • alexbruno
      alexbruno last edited by alexbruno

      Hi Armin,

      Just noticed this strange error—it must have started very recently. Clearing the cache and disabling plugins don't have an impact.

      Using a CSS transform on .category-link causes the underlying thumbnail to disappear in Chrome and Internet Explorer.

      The following styling was used in "Custom CSS for Desktop Version"

      .category-link {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      }

      Chrome Result
      Screenshot 2015-09-08 03.28.42a.png

      Internet Explorer Result
      Screenshot 2015-09-08 03.27.51a.png

      Firefox Result
      Screenshot 2015-09-08 03.26.40.png

      When I remove -webkit-transform, -ms-transform, and transform, the images reappear, but unfortunately the text is no longer rotated.

      This issue seemingly appeared out of nowhere, and of all the browsers to be affected, why IE + Chrome? Firefox and Safari are fine. Weird!

      I'll disable rotation for now, but am eagerly looking for a solution. If I can provide any more information to help please let me know.

      Also—I realize styling issues/bugs may be out of scope for your help—but I wanted to post just in case you do have any ideas or anyone else does. Thanks!

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

        Hey!
        Try:

        .thumb .title{
        -webkit-transform: translate(-50%,-50%) rotate(-45deg);
        -moz-transform: translate(-50%,-50%) rotate(-45deg);
        -ms-transform: translate(-50%,-50%) rotate(-45deg);
        -o-transform: translate(-50%,-50%) rotate(-45deg);
        transform: translate(-50%,-50%) rotate(-45deg);
        }
        
        alexbruno 1 Reply Last reply Reply Quote 1
        • alexbruno
          alexbruno @arminunruh last edited by

          @arminunruh This worked wonderfully. Thank you!

          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
          M
          L
          T

          Recent Topics

          • A

            Broken images

          • L

            Hide mobile menu, when scrolling down

          • J

            Imagehover addon show mouseover state

          • F

            X-button (close) on category page

          laytheme.com