Incorrect border behavior in css selectors

the-lambda-way commented 6 years ago

When adding a border to an html element using a css selector, the preview appears to add one border inside the element and one outside. This shows up clearly with scrollable content. bug1 When I add the style directly to the element, a single border is applied outside the element, as expected.

Maybe related - when I apply "overflow: auto" to the css selector with the border also in the selector, I get one set of scrollbars inside the inner border, and another set inside the outer border.

bug2

Moving the border into the element eliminates the problem. Moving the overflow into the element and keeping the border in the selector gives me the first photo.

chinchang commented 6 years ago

@pinduli Could you please provide some code to replicate this scenario?

the-lambda-way commented 6 years ago

Here's the HTML I used at the time (but I think I added Bootstrap since)

<!doctype html>
<html lang='en'>

<head>
    <script src="save.js"></script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="save.css">
</head>

<body>
    <h1>Bookmark Folders</h1>

    <div id="bookmarks" style="overflow: auto; border: 1px solid #d9d9d9"><div id="bookmarks"><ul><li><span id="1">Bookmarks bar</span><ul><li><span id="607">Reddit</span></li></ul></li><li><span id="2">Other bookmarks</span><ul><li><span id="6">Game Design</span></li><li><span id="14">Interesting</span></li><li><span id="15">Education</span></li><li><span id="639">Programming</span></li><li><span id="788">Testing</span><ul><li><span id="789">A Deeply</span><ul><li><span id="790">Nested</span><ul><li><span id="791">Folder</span><ul><li><span id="792">Structure</span><ul><li><span id="793">For</span><ul><li><span id="794">Vertical</span><ul><li><span id="795">And</span><ul><li><span id="796">Horizontal</span><ul><li><span id="797">Scrollbars</span></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></div></div>

    <div id="options">
        <input type="checkbox" id="edit">
        <label for="edit">edit when done</label>
    </div>

    <div>
        <button id="new">New Folder</button>
        <span id="right_buttons">
            <button id="done">Done</button>
            <button id="remove">Remove</button>
        </span>
    </div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>   

</body>

</html>

and the CSS

@font-face {
    font-family: Roboto;
    src: "https://fonts.googleapis.com/css?family=Roboto";
}

html {
    font-size:  14pt;
    padding:    8px;
    margin:     auto;
    width:      430px;
    height:     400px;
}

body {
    font-family: Roboto, sans-serif;
}

h1 {
    font-size:   1.25em;
    font-weight: normal;
}

#options {
    padding: 8px 0px;
}

#bookmarks {
    height: 300px;
}

#bookmarks:focus {
    border: 2px solid #b7d2ff;
}

input[type=checkbox] {
  vertical-align: middle;
}

That results in a normal scroll area. When I remove the border from the element

<div id="bookmarks" style="overflow: auto">

and put it in the selector

#bookmarks {
    height: 300px;
    border: 1px solid #d9d9d9;
}

I get the first image. When I move the overflow there as well

<div id="bookmarks">

#bookmarks {
    height: 300px;
    border: 1px solid #d9d9d9;
    overflow: auto;
}

I get the second image.

chinchang / web-maker

Incorrect border behavior in css selectors #227