CSS-Only Modal - FF/Safari

[sturobson]

first up... Love this!

(back story: I consume links clicked in twitter / reeder in Safari)

Opening up the site, I clicked through and noticed this one doesn't want to work. I opened the CodePen fully - http://codepen.io/una/full/pEVjwj/ - and tried it in Safari 9.1 (so this might be fixed in Sierra) and FireFox (dev. edition) 51.0a2

I'll try and dig into why, what needs fixing, but can't guarantee when :(

Lovely project :)

[shadeed]

This is a very interesting issue! What I have noticed so far:

• It works in FF if the focus came from keyboard.
• Works in Safari if we forced :focus from dev tools.
• keyboard :focus is not working in Safari. I even added a link and can't move focus to it.

Also, for some reason the modal is not centered in Safari. This is a screenshot when forcing :focus

Update

It works in FF now. The only issue is still in Safari, still not accepting focus from mouse or keyboard. Here is the pen:
http://codepen.io/shadeed/pen/bwrjKX/

[jpdevries]

This is really clever!

@shadeed focus from keyboard in Safari should work if you have tab to highlight enabled

still doesn't work with clicking in Safari though.

[shadeed]

@jpdevries Thank you! I learned something new. :)

Now it's working from keyboard and yes clicking still doesn't working.

[marcysutton]

this should be fixed with #46