7

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.

Improve this question
1

0

Reset to default

You must log in to answer this question.