CODEWITHSUNDEEP
htmlcssgoogle-chromecross-browser
Robert
Robert

Reputation: 2824

Why there are collapse on divs with google chrome

That's a sample from my page (Arabic one) here I want to know why the × is behind the text (in z-axis) not beside it as it suppose to be

I know if I give the other div float: right; it will solve it but I want explanation of why that happened because I find that doesn't make any sense

html, body{
    direction: rtl;
    /*its a MUST because the site is arabic*/
}

#popup {
    overflow-y: scroll;
    /*the window may not be able to contain the text*/
    background: gray;
}
    
#close {
    color: red;
    float: right;
}
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta charset="utf-8">
</head>
    
<body>
    <div id="popup">
        <div id="close">×</div>
        <div>
            some text goes here
        </div>
    </div>
    
</body>
</html>

That's neither happening with ltr direction nor with other browsers than google chrome (tried with firefox and edge it works fine)

Upvotes: 2

Views: 251

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Looks like a bug to me. Specifically, it seems that the × is offset by exactly the width of the scrollbar. You can confirm this in the Developer Tools by inspecting the container and toggling the overflow-y:scroll entry on and off - you'll see that the × snaps into and out of its intended position.

You may want to report this - you can do that on this very page since you've already provided a working example. In Chrome, select "Help => Report an Issue" from the menu and fill out the form provided.

Upvotes: 2

Related Questions