CODEWITHSUNDEEP
htmlgoogle-chromecss
Archy Will He
Archy Will He

Reputation: 9767

A weird rendering bug in Chrome

updates

If the first time you load the page and this bug doesn't occur,

Click the anchor which directs you to the home page again, and the bug would most likely show up. (It is annoying that almost every time I go back to the home page from another pages, there is this bug.)

I'm using Chrome 24.0.1312.57.

Chrome has always been one of the greatest browsers that support CSS3. I was quite disappointed when I encountered this weird behavior of hers that resembles a bug.

I have handcrafted some simple circular buttons with CSS3 and jQuery. (I didn't go for pure Javascript because I was lazy to work on the crossbrowser compatibility myself.)

A button basically consists of one division containing two sub divisions and one sub division also contains another sub division. And they are all inside an anchor that triggers a window to superimpose:

<a><div class="archbox smaller"><div class="archfacebook"></div>
<div class="archrollerx"><div class="archfacebook below2"></div></div></div></a>

the anchor is simply styled to flow:right and this is how the exterior division is styled:

-webkit-border-radius: 22px;
border-radius: 22px;
height: width: 44px;
height: 44px;
overflow: hidden;
border: 1px #FFF solid;
position: relative;

When nothing goes wrong, this is how they would look at a rest stage:

enter image description here

But sometimes when I load the page, this occurs:

enter image description here

But after the button had been moused-over, it turned normal again. (As if you just told Chrome that there was a bug.)

It went on normal for a while, but after some time, it occured again.

And sometimes it gives the extra border when moused-over:

enter image description here

This is really a weird behavior because it is not like run-time errors that occur everytime a page is loaded. Sometimes it would occur, while sometimes it simply would not. So I feel the need to fix it.

At first I thought there is some bug with the border, so I added this:

border:1px #FFF solid!important;

to the normal, hover and visited state of the buttons. But it didn't fix the problem; it still occurred every so often. I was really frustrated. After thinking about it or a while, I finally came to the realisation that there is actually a bug with the displacement: it seems like Chrome has the tendency to "subconsciously" display the Facebook & Twitter button again behind the Twitter and Google plus button, giving the illusion that they has a border. And I have no idea how to stop Chrome from behaving this way.

Has anyone encountered the same problem before? What should I do such that this won't happen at all?

I tried Firefox and Safari, and I had not yet encountered this.

Upvotes: 2

Views: 1744

Answers (2)

Danilo Kobold
Danilo Kobold

Reputation: 2581

UPDATE:

<a class="con archtwitterx" href="https://twitter.com/intent/tweet?text=+check+this+article+ out&amp;url=http%3A%2F/www.arch0-0.com/2013/02/why-i-chose-to-drop-out.html" onclick="javascript:window.open(this.href,   '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=800');return false;" target="_parent" style="
    border: 0;
">

style="border: 0;" on a fixed it

outline: 0;

might do the trick. but my guess is on border.

Upvotes: 0

ASertacAkkaya
ASertacAkkaya

Reputation: 661

I reloaded the page many times, also used the private browsing to avoid if cached, haven't encountered this bug. Google Chrome 24.0.1312.57 m, Windows 7 Ultimate 64b.

Does your Google Chrome perhaps load some resources from the cache?

Upvotes: 1

Related Questions