4

I have encountered a bug in the Stack Overflow snippet interface. I have created a div and wrote some css in the CSS section for the same. I noticed that the div CSS content is affecting the console div shown in the result section too.

console.log($("div").css("borderRadius"));
div {
  width: 10px;
  height: 50px;
  box-shadow: 0 0 10px gray inset;
  background: radial-gradient(white, #737373);
  border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

It is because the console div is rendering inside the same iframe where the result is shown. I found that using a class in my HTML and CSS code will fix it.

console.log($(".hi").css("borderRadius"));
.hi {
  width: 10px;
  height: 50px;
  box-shadow: 0 0 10px gray inset;
  background: radial-gradient(white, #737373);
  border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hi"></div>

IMO Stack Overflow developers should show the result and the console elements in different iframes because as I think of now, in the current structure the div CSS content will affect all the divs which are inside the result iframe.

You must log in to answer this question.

Browse other questions tagged .