When item is `:focus`: `box-sizing: border-box;` causing shift up "content-box into view" with `overflow: hidden;` parent

Issue #2107348 • Assigned to Rossen A.

Details

Created
Mar 20, 2015
Privacy
This issue is public.
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

Use the demo: http://jsfiddle.net/MadLittleMods/st8Ldtwb/

Demo code (for easier discussion reference):

<div class="wrapper">
    <div class="item">
        <a href="#0" class="link">Heya</a>
    </div>
</div>
*, *:before, *:after
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper
{
    overflow: hidden;

    height: 50px;

    background: rgba(0, 255, 255, 0.75);
}

.item
{
    display: inline-block;
    vertical-align: bottom;

    height: 50px;
    line-height: 50px;

    background: rgba(255, 255, 0, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.75);
}

.link
{
    display: block;
}

.link:focus
{
    outline: none;

    color: #ff0000;
}

Expected Results:

The link/box being focused stays in place.

Actual Results:

Dev Channel specific:

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Tony S.”

      Changed Assigned To to “Rossen A.”

      Changed Assigned To from “Rossen A.” to “IE F.”

      Changed Status to “Won’t fix”

      Changed Assigned To to “Bogdan B.”

      Changed Status from “Won’t fix”

      Changed Assigned To from “Bogdan B.” to “Rossen A.”

    You need to sign in to your Microsoft account to add a comment.

    Sign in