4 Replies Latest reply on Jun 12, 2013 1:40 PM by resdesign

    ellipse becames square in Safari

    AMULI Level 4

      Hi,

       

      Developping some kind of content slider, I have bullets buttons to access to the different screens. The symbol just holds a circle drawn in Edge.

       

      In Firefox or Chrome :

      FireFoxChrome.png

      In Safari :

      Safari.png

      I could import a SVG circle instead. But what is the problem ? We could hope a simple circle is rendered correctly in every browser…

       

      Gil

        • 1. Re: ellipse becames square in Safari
          resdesign Adobe Community Professional & MVP

          Annoying! You may want to use css for Safari to be sure!

           

          sym.$('Rectangle').css({

                    '-webkit-border-radius': '50%',

                    'width': '20px',

                    'height': '20px'

          });

          • 2. Re: ellipse becames square in Safari
            AMULI Level 4

            Hi Mary,

             

            I tried replacing the circle by an Edge rounded rectangle with your 50% radius trick to make it look like a circle, but Safari still renders a square.

             

            So I tried your code. Given that there is a slider symbol with nested bullets symbols, I put that line in the document.compositionReady event handler :

             

            sym.getSymbol("slider").getSymbol("bullet-1").$('roundedRect').css({ etc.

             

            Did I miss something ?

             

            Gil

            • 3. Re: ellipse becames square in Safari
              resdesign Adobe Community Professional & MVP

              Hi Gill,

               

              OK. More testing - put it in creation complete in your symbol(s).

              Use the ellipse to make the circles anyway so it is working in general and then use browser specific prefixes. (-moz- , -wekkit- etc..) if necessary.

              I tried the 3 shapes:

               

              Add this code to make sure it works for all browsers

               

              sym.$('ellipse1').css({

                        '-webkit-border-radius': '50%',

                        'border-radius': '50%',

                        'width': '20px',

                        'height': '20px'

              });

               

              Hope this helps. i can post a file if you need.

               

              sym.$('Rectangle').css({

                        '-webkit-border-radius': '50%',

                        'border-radius': '50%',

                        'width': '20px',

                        'height': '20px'

              });

              sym.$('RoundRect').css({

                        '-webkit-border-radius': '50%',

                        'border-radius': '50%',

                        'width': '20px',

                        'height': '20px'

              });

              • 4. Re: ellipse becames square in Safari
                resdesign Adobe Community Professional & MVP

                By the way you will need to experiment so you are sure your circles are the same size.

                 

                Here for example - the first one in FF is bigger if you keep 20px than the 2 last ones - to make the circle the same size I had to use 35px for them.

                 

                So use your ellipse tool to make the circle and add the code so it works in all browsers and then test to make sure the size is corrected in the browsers that use the code instead of the shape.