2 Replies Latest reply on Nov 17, 2013 2:42 PM by neohtom

    Shadows Getting Clipped When CSS Overflow Set To Hidden

    neohtom Level 1

      I created a symbol, in which I would like to embed some other content. However when I set the Overflow setting on the main symbol to "Hidden", it also clips the shadow of the symbol as well.

       

      1306e197b02d38fc5d5ed765562a2ecf.png

       

      The symbol itself is 150px, so I tried increasing the stage size of the symbol itself to something like 200px, and I am still getting the issue when I preview it in a browser.

       

      a189d931c22e9e6a6f1671b6f9ac149a.png

       

      Do I need to use two layers, one that's transparent for clipping purposes, and another to render the full shape unclipped? Or can this still be done with just one shape?

        • 1. Re: Shadows Getting Clipped When CSS Overflow Set To Hidden
          Zaxist Level 4

          try not to hide it and just use this css display:none and show it with display:block

           

          if didnt i think if you do what you did with your clip Stage doing it with your image, i mean adding some space for your image like 10px this will solve your issue

           

          Zaxist

          1 person found this helpful
          • 2. Re: Shadows Getting Clipped When CSS Overflow Set To Hidden
            neohtom Level 1

            I tried adding the extra space to the symbol stage itself, but for some reason it doesn't seem to be having any effect.

             

            I did find out one workaround though: to not apply any shadow/glow effects to the symbol itself, but rather, drag an instance of the symbol on to the main stage and then apply the shadow or glow. Then it doesn't get clipped and you don't need to use unecessary extra empty shapes. The one down side is though that you need to do this for every instance of the symbol you drag to the stage I suppose.