1 Reply Latest reply on Jul 10, 2016 10:41 AM by Nancy OShea

    OT: Weird CSS

    Nancy OShea Adobe Community Professional & MVP

      Same CSS code renders differently as viewport is increased/decreased.

      Screencast below shows what happens in MS Edge and Mozilla Firefox. 

      Google Chrome does not display the same behavior.

       

      div {

          background-color: rgba(8,21,163,0.7);

          position: relative;

          z-index: 100;

          font-size: 6vw;

          border-radius: 200px 0px;

          border:113px double rgba(255,255,155,0.7);

          width: 50vw;

          height: 9vmin;

          height: 9vm;

          -webkit-transform: rotate(-45deg);

          -moz-transform: rotate(-45deg);

           -ms-transform: rotate(-45deg);

          -o-transform: rotate(-45deg);

          transform: rotate(-45deg);

      }

       

      Nancy O.

        • 1. Re: OT: Weird CSS
          osgood_ Level 8

          Firefox on Mac works ok.

           

          I would'nt use it as its fairly unstabe at ceratin sizes but I see nothing like what is happening in your screencast in either Mac Firefox, Chrome or Safari. They all render the css fairly the same -  In Safari the shape starts to breaks below 500px wide.