Databases
StackOverflow2013
Postsdbo
POA weird rendering bug in Chrome
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POA weird rendering bug in Chrome
    text
    copied!<blockquote> <h1>updates</h1> <p>If the first time you load <a href="http://www.arch0-0.com/" rel="nofollow noreferrer">the page</a> and this bug doesn't occur,</p> <p>Click the <img src="https://i.stack.imgur.com/AsLIa.png" alt="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.)</p> <p>I'm using Chrome 24.0.1312.57.</p> </blockquote> <hr> <p>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.</p> <p>I have handcrafted some <a href="http://www.arch0-0.com/" rel="nofollow noreferrer">simple circular buttons with CSS3 and jQuery</a>. (I didn't go for pure Javascript because I was lazy to work on the crossbrowser compatibility myself.)</p> <p>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:</p> <pre><code>&lt;a&gt;&lt;div class="archbox smaller"&gt;&lt;div class="archfacebook"&gt;&lt;/div&gt; &lt;div class="archrollerx"&gt;&lt;div class="archfacebook below2"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt; </code></pre> <p>the anchor is simply styled to <code>flow:right</code> and this is how the exterior division is styled:</p> <pre><code>-webkit-border-radius: 22px; border-radius: 22px; height: width: 44px; height: 44px; overflow: hidden; border: 1px #FFF solid; position: relative; </code></pre> <p>When nothing goes wrong, this is how they would look at a rest stage:</p> <p><img src="https://i.stack.imgur.com/JJ2OS.png" alt="enter image description here"></p> <p>But sometimes when I load the page, this occurs:</p> <p><img src="https://i.stack.imgur.com/3Ui4j.png" alt="enter image description here"></p> <p>But after the button had been moused-over, it turned normal again. (As if you just told Chrome that there was a bug.)</p> <p>It went on normal for a while, but after some time, it occured again.</p> <p>And sometimes it gives the extra border when moused-over:</p> <p><img src="https://i.stack.imgur.com/vkGKo.png" alt="enter image description here"></p> <p>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.</p> <p>At first I thought there is some bug with the border, so I added this:</p> <pre><code>border:1px #FFF solid!important; </code></pre> <p>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 &amp; 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.</p> <p>Has anyone encountered the same problem before? What should I do such that this won't happen at all?</p> <p>I tried Firefox and Safari, and I had not yet encountered this.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload