Strange appearance of textfield in chrome

[stratost]

I have a strange problem with my website appearance in chrome and only for my resolution/screen 1280×1024.

The links under the contact tab move a bit on hover, if remove the :hover colour its ok. Also it appears on textfields under the contact tab too, when i click in textfields they move a bit also and on the last thumbnails (of each row) under the portfolio section, when i hover them for first time.

You can test it on http://stratost.gr/ under the contact tab and take a look at this screenshot i have uploaded to dropbox to undestand what i mean https://dl.dropboxusercontent.com/u/49493396/screen.jpg

ps. on site is playing background music, you can pause it by clicking the pause button. Thanks.

[Paulie_D]

ps. on site is playing background music, you can pause it by clicking the pause button.

You had me until I saw this.

[stratost]

Whats your problem? …and why you answered about that? If you don’t know how to solve my problem its ok man… i think its not necessary to post something… just to show us your answer.

[stratost]

Any expert on css at this site to help me? I have disabled the audio.

[Paulie_D]

I’m not seeing any movement in the link on hover although I do see the ‘inset’ thing you showed in the picture.

One thing which is probably unrelated:

This is your CSS…it has a repetition and a missing semi-colon

a:hover {
    color: #FFF  <=== here
    outline: none;
    color: #FFF;
  }

I’ll keep looking

[Paulie_D]

I’m not sure but is it usual to wrap form elements in paragraph tags?….I guess there is nothing wrong with it but I believe that it’s more common to use divs.

Again, possibly unrelated…I’m clutching at straws at the moment.

[stratost]

Thank you for your note @Paulie_D , although nothing has changed. About form elements, …my friend/programmer has done it so i think its ok.

If you know someone else who could help me/us with this bug too, …could you ask him please? :)

[stratost]

Hi Mr @Paulie_D you are the only you had tried solve my problem. Any new ideas? I think it has to do with dimensions because if you open inspector or make zoom in/out the problem dissapears. But the problem with hover word “here” it’s about css for sure as if I delete the hover colour they don’t move on over.

[Paulie_D]

The dimensions of the link do not change on hover (29px x 16px). I suspect it’s just an optical illusion.

As for the textarea I don’t know if this is responsible but you might try removing it as I don’t think it’s doing anything.

input, textarea {
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

[stratost]

Hi @Paulie_D i removed this too but nothing happened again. I had added this code exactly for my problem :)

Anyway, thank you for your efforts. It seems to be easier to find someone who can fix chrome than my site’s weird issue. :)

[gowda24]

Hi Stratost,

Add clear div above the

<

div class=”content-bottom”> as below

<div style="clear:both"></div>

Also change the content-bottom css to

.content-bottom {
    position: fixed;
    bottom: 100px;
    left: 77.5%;
    height: 50px;
}

[stratost]

Hello @gowda24, i did what you said me, but nothing happened :(
(i also uploaded the changes) but thank you for your reply!

[Paulie_D]

Two things to try (and I have no idea whether they will work).

Firstly, the box is not , in fact, a textfield (although that’s how you have it set up)…wht not just change it to an <input type="email" name="email" required>?

Secondly, since it appears that the issue ‘goes away’ when the field receives focus why not add the autofocus attribute (whether you change it to an email field or not).

So…<input type="email" name="email" required autofocus="autofocus">

[stratost]

:( Thank you @Paulie_D i tried what you said. :( again i’ll say that something with dimensions has the problem as it disappears when i zoom in or out :(

image here: https://dl.dropboxusercontent.com/u/49493396/01.jpg

and again thank you for looking on it :)

[Senff]

I think it’s just some rendering bug in Chrome that has to do with the fact that your DIV is being horizontally moved from right (off-screen) into the middle, something like that.

[Author]

Posts