sasha koshka's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Quirk in webkit ::before positioning

It seems as though webkit browsers don't position ::before elements correctly relative to their closest positioned ancestor if that ancestor is <tr>. I use relatively positioned ::before elements to get a double border on some things on my page, notably the comments section. However, the comments section is an html table.

I also have no clue why the webkit developers have failed to add backdrop-blur without a prefix. Like come on, it works perfectly fine. So many websites use it, including mine. You might as well remove the annoying prefix now.

The only way I can get a double border on comments is if I use a css outline. However, this looks funny on both webkit and chrome, as basically everything on my page has rounded corners and the blink and webkit devs collectively thought it would be funny and silly to not round off outline corners even when the element that has them has a border radius.

Another case of Firefox being the only browser that actually works correctly...

Edit: chrome applies border radius to outlines, I just didn't set something correctly.


1 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

trinity

trinity's profile picture

Oh no... I'd hate to alienate Chr*me users...


Report Comment