CSS: blinking background on mouse hover

Gallex · 2017-02-28 10:39:04

hi,

NB! this is occurring only with chrome browser!

on burger bar (top left) hover the red background blinking once. can anybody tell, how to get rid off it?

colak · 2017-02-28 10:54:54

Hi

Possibly Unrelated…. You have some html validation error.

<header id="header"class='bg-2'>

should be

<header id="header" class="bg-2">

Gallex · 2017-02-28 11:11:18

colak wrote #304301:

Hi

Possibly Unrelated…. You have some html validation error.

<header id="header"class='bg-2'>...

should be

<header id="header" class="bg-2">...

fixed, thank’s. but yeah, not related

philwareham · 2017-02-28 12:07:17

The issue is caused by the global transition on your a in the CSS file. You need to be more specific in this case as it’s only the opacity you want to transition I assume (it’s currently transitioning the background colour to transparent and back again too, hence the flicker).

Try this:

transition: opacity 0.3s;

philwareham · 2017-02-28 12:14:06

Also (unrelated), maybe use SVG for the burger instead of fudging the HTML/CSS. You can inline it as well to save an additional HTTP request.

For example:

.burger {
    ...
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23fff'%3E%3Crect x='4' y='6' width='24' height='4'/%3E%3Crect x='4' y='14' width='24' height='4'/%3E%3Crect x='4' y='22' width='24' height='4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 32px 32px;
    ...
}

Gallex · 2017-02-28 13:28:56

philwareham wrote #304303:

The issue is caused by the global transition on your a in the CSS file. You need to be more specific in this case as it’s only the opacity you want to transition I assume (it’s currently transitioning the background colour to transparent and back again too, hence the flicker).

Try this:

transition: opacity 0.3s;...

added, didn’t help. before i remove a transition for good (which helped), what to try more?
noticed that, background blinking than i hover article title or email anchor as well.

bici · 2017-02-28 16:17:09

unrelated, but it was just a wild guess that led me to find your MENU link. it is pretty well invisible to the user.

phiw13 · 2017-02-28 23:38:38

bici wrote #304306:

unrelated, but it was just a wild guess that led me to find your MENU link. it is pretty well invisible to the user.

Yeah. The menu link and the menu (and the red vertical bar on the left) are invisible with Safari 10.

This:

#container { overflow: hidden}

is the cause. I guess that has to be considered a bug nowadays, although I disagree with the conclusions of the CSS-WG on that.

A possible workaround (in case overflow: hidden is absolutely needed for some reason):

#container { 
  /*overflow: hidden*/
  left: 60px; /* <-- add -  */
  margin-left: 0; /* <-- change */
}

As for the flickering, must be bug in the Blink rendering engine. No clue.

Last edited by phiw13 (2017-02-28 23:42:03)

Gallex · 2017-03-01 07:50:53

phiw13 wrote #304309:

Yeah. The menu link and the menu (and the red vertical bar on the left) are invisible with Safari 10.
This: #container { overflow: hidden}...
is the cause.
As for the flickering, must be bug in the Blink rendering engine. No clue.

you are absolutely brilliant!! #container { overflow: hidden}... was a “blinker creator”!
thank’s a lot!

ps. how is visibility with safari now?

phiw13 · 2017-03-01 07:55:07

Gallex wrote #304317:

you are absolutely brilliant!!

:-)))

ps. how is visibility with safari now?

Problem solved, as expected.

Gallex · 2017-03-01 11:16:47

phiw13 wrote #304309:

Yeah. The menu link and the menu (and the red vertical bar on the left) are invisible with Safari 10.

installed safari 5.1.7 for windows, and, site’s frontpage is not displayed as expected. :(

is there code inspector for safari as well like other browsers has?

phiw13 · 2017-03-01 11:52:58

Gallex wrote #304319:

installed safari 5.1.7 for windows, and, site’s frontpage is not displayed as expected. :(

Safari for Window is old and very outdated by now (Apple stopped supporting it years ago, when Chrome became available, IIRC). Do not trust it for anything.

is there code inspector for safari as well like other browsers has?

Of course, but not on that version of Safari I think.

PS – Screenshot of your page with Safari 10.

Last edited by phiw13 (2017-03-01 11:56:55)

Textpattern CMS

Textpattern CMS support forum

#1 2017-02-28 10:39:04