Search code examples
csslayoutgradientradial-gradients

Radial Gradient and absolute positioning producing different results in different browsers

I have developed a switch board with two electronic switches and two lights, it is producing different results in different browsers.

Chrome Output

In Chrome it is working good.

Click for Larger Image

enter image description here

Safari Output

The shiny labels of buttons are pushed to bottom

Click for Larger Image

enter image description here

Fire Fox Output

The radial gradient is DULL

Click for Larger Image

enter image description here

Is there any thing i am missing while doing cross browser platform support?

Any suggestions please! Any help will be highly appreciated

Please look for Present version Code Pen Link It is with comments

Solution

  • Fixed label position and gradient : Code Pen Demo

    To fix the position of the labels, use top instead of margin-top.

    .switch:before { /* Used for Inner Ligths of switch */
  content: "";/* Without this no layout positioning will work */
  background: rgb(53, 244, 252);/* Sandy white color */
  width: 36%;/* occupied 36% of switch (which is 50% of board frame */
  position: absolute;
  height: 4px;/* Light height */
  margin-top: 0%;/* 36% width + 32 % left border + 32% right border = 100% of switch width */
  top: 77%;
  margin-left: 32% ;
  margin-right: 32% ;
  marging-bottom :0px;
  border-radius: 12px;/* Light radius */
  box-shadow: inset 0 0 1px rgba(0,0,0,.2);/* Switch light shadow */
  border: 1px solid rgba(0,0,0,.1);/* Switch Light border */
}

.on.switch:before {/* Used to target light of switch */
  margin: 0% 32% 8%; /* Move light of switch up so it appears that light is actually on */
  top: 70%;
  background: rgba(255, 255, 255, 0.42);
}

    The problem is not in Safari or Chrome, but rather Firefox doesn't handle margin-top in percentage properly. I tried setting margin-top: 100% and only Safari and Chrome (Mac version) render the label below the switch. Firefox determines that 100% is less than the full height of the switch.

    As for the gradient in Firefox, simply move the line radial-gradient to the top and leave -moz-radial-gradient at the bottom. This would allow the browser specific CSS to take effect.

    .radial:before{
  content:"";
  position:absolute;
  top:-240px;
  /* width: 1200px;*/
  /*max-width: 100%;*/
  width:100%;
  height: 920px;
  background: radial-gradient(ellipse at center,  rgba(255,255,255,0.15) 1%,rgba(255,255,255,0.15) 2%,rgba(255,255,255,0) 56%,rgba(255,255,255,0) 100%);
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.75) 1%,rgba(255,255,255,0.65) 2%,rgba(255,255,255,0.15) 56%,rgba(255,255,255,0.05  ) 60%,rgba(255,255,255,0.04) 70%,rgba(255,255,255,0.04) 80%,rgba(255,255,255,0) 100%);
  background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.75) 1%,rgba(255,255,255,0.65) 2%,rgba(255,255,255,0.15) 56%,rgba(255,255,255,0.05   ) 60%,rgba(255,255,255,0.04) 70%,rgba(255,255,255,0.04) 80%,rgba(255,255,255,0) 100%);
  background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.75) 1%,rgba(255,255,255,0.65) 2%,rgba(255,255,255,0.15) 56%,rgba(255,255,255,0.05 ) 60%,rgba(255,255,255,0.04) 70%,rgba(255,255,255,0.04) 80%,rgba(255,255,255,0) 100%);
  z-index: -21;
}