box-shadow incorrectly and inconsistently rendered when being applied by javascript.

Issue #6274503 • Assigned to Frank O.

Details

Created
Jan 22, 2016
Privacy
This issue is public.
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

URL:

Repro Steps:

Check the jsfiddle in the description. Just tab through the example to reproduce.

We are building a toggle object which is essentially a list of hidden radio inputs that have their labels styled as buttons and are presented in a row (check the attached example, hopefully it doesn’t need much more explanation). When one of the inputs are focused we are setting a modifier class, using javascript, to the object in order to highlight the set as if they were focused - like other form elements.

The problem is that Edge is rendering this not only incorrectly, but also inconsistently incorrectly when tabbing through the form element. It seems to depend on which direction focus focus is gained when you tab and shift tab?

Resizing the window appears to correct the problem too.

https://jsfiddle.net/v6ck5fc6/2/

Note: clicking works as expected. The style in this case is as we expect.

Expected Results:

It should work the way it does in Chrome.

Actual Results:

Dev Channel specific:

No

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Frank O.”

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

    Sign in