Today, while working on a new website, I stumbled upon a rather peculiar bug. I am baffled as to why it is occurring and could really use some insight from someone who might have encountered this issue before.
The bug appears when I added a Facebook page plugin to the navigation menu fixed at the top-right corner of the page. Specifically, the problem arises when the bottom of a round div within the right bar overlaps with the title of the page in the plugin - causing the border-radius of the div to disappear and turn into a square shape. This strange behavior only occurs in a very specific scenario.
I have provided some code snippets for better understanding:
.nav {
position:fixed;
width:100%;
text-align:right;
z-index:9999;
}
.face {
position:absolute;
width: 20%;
background:#F93;
top:5px;
right:10px;
border-radius:9999px;
overflow:hidden;
}
/* Additional CSS rules included */
Upon further investigation, I discovered that the bug seems to be limited to Webkit browsers, while Firefox and surprisingly Internet Explorer render the layout correctly.
I have also attached screenshots to illustrate the issue:
Before overlapping the title:
Screenshot1
After overlapping the title:
Screenshot2
If you need any further clarification or assistance, please let me know. Thank you for your help!