Theme Essential Chrome Dropdown Menu Flickering

Theme Essential Chrome Dropdown Menu Flickering

by Adam Barbary -
Number of replies: 19

This error seems similar to this https://moodle.org/mod/forum/discuss.php?d=325499

However, this is also affecting Windows and Mac platforms using Chrome browsers (that I can test).

When editing is turned on, and a drop down menu is selected from any activity or resource, moving down the list causes the menu to flicker and makes selection almost impossible. This isn't affecting Chrome when using the standard theme, and isn't affecting other browsers when using the essential theme.

Currently apparent on Moodle 3.0 - Essential 3.0.1.2 (Build: 2016010206) & Moodle 2.9 - Essential 2.9.1.4.1 (Build: 2015062415)

I noticed that Chrome had an update on the 20th, and it was perhaps related to this?

Cheers,

Adam

Average of ratings: -
In reply to Adam Barbary

Re: Theme Essential Chrome Dropdown Menu Flickering

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Pending replication before I reply with a decision.

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme Essential Chrome Dropdown Menu Flickering

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Cannot replicate on Version 51.0.2704.103 m (64-bit) of Chrome on Windows 7 with Essential 3.0.1.5.

Could you share a screen-cast of the issue please Adam.

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme Essential Chrome Dropdown Menu Flickering

by Adam Barbary -

Hi Gareth,

My colleagues have advised me that there are no issues with IE, Edge or Firefox on Windows 10 x64, nor any issues with Firefox 47 or Safari 9.1.1 on Mac OSX 10.11.5. The flickering is limited to Chrome and only commenced in the last couple of days.

Hope that helps.

Adam

(Edited by Mary Evans - original submission Tuesday, 21 June 2016, 11:58 PM)

Average of ratings: -
In reply to Adam Barbary

Re: Theme Essential Chrome Dropdown Menu Flickering

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Adam,

Odd as that is what I tested and could not replicate.  I notice that the colours are different, so what changes have you made?  I tested on Win 7, is this a Win 10 thing?  Does the problem happen with the Clean theme?  If so would be another plugin or course specific issue.  Is it just one or many courses?

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme Essential Chrome Dropdown Menu Flickering

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Adam,

Ok, I tested on Chrome Version 51.0.2704.103 m on Win 10 32-bit and could not replicate.  Therefore I will not spend any more time on this until new evidence comes to light that it is Essential.

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme Essential Chrome Dropdown Menu Flickering

by Adam Barbary -

Thanks for your efforts. I will test our setup on a clone and start stripping things out. I'll look at the CSS first, then plugins. There is no issue with Clean, so I'm leaning towards an error in the customised CSS.

Again, thanks for your help.

Average of ratings: -
In reply to Adam Barbary

Re: Theme Essential Chrome Dropdown Menu Flickering

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

The flickering is the hover white on white. It is probably Chrome User Agent CSS that is the problem since it is not visible on other browsers.

You can test this out by changing the link/hover colours in the Essential theme settings to green and red so they stand out. Then test again and see what happens.

Average of ratings: -
In reply to Mary Evans

Re: Theme Essential Chrome Dropdown Menu Flickering

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

I disagree Mary because the nature of the cursor is changing between a pointer and something that can be clicked on.  Thus the nature of the element and not the nature of the hover CSS.

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme Essential Chrome Dropdown Menu Flickering

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

But there are other states associated with a:link pseudo classes.

LINK, VISITED, HOVER, ACTIVE, FOCUS

We all know that getting the order of these pseudo classes wrong can mess up a menu list.

In fact there is one CSS rule in Bootstrap/Bootstrapbase for the dropdown menu which is in the wrong order where ACTIVE and FOCUS are the wrong way round.

Also, you cannot rule out that the custom CSS which Adam has added may be the cause. Adding cursor: hand; instead of cursor: pointer may have different effects in Chrome for all we know, if it is not checked.

So please do not assume I am wrong until it has been ruled out.

Thanks

Mary

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme Essential Chrome Dropdown Menu Flickering

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

It looks to have been reported in Bootstrap as an issue.

https://github.com/twbs/bootstrap/issues/19865

Average of ratings: -
In reply to Mary Evans

Re: Theme Essential Chrome Dropdown Menu Flickering

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Mary,

https://github.com/twbs/bootstrap/issues/19865 cannot be the problem as it pertains to a 'select' and this is a 'ul > li'.

I can't seem to find 'cursor: hand' on: http://www.w3schools.com/cssref/pr_class_cursor.asp.

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme Essential Chrome Dropdown Menu Flickering

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi, 

That's because cursor: hand; does not exist, but you would not believe how many people use it in CSS.   The correct one to use is cursor: pointer;

I assumed you knew that? That was my reason for using it my example.

Anyway, the real problem appears to be a select rewrite, which is odd isn't it? 

However, this did remend me of another problem which you reported a while ago about a moving icon in the Admin block. Do you remember? Could it be related?

Mary

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme Essential Chrome Dropdown Menu Flickering

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

How about this then?

http://stackoverflow.com/questions/32498553/dropdown-menu-flickering-on-hover-after-updating-to-chrome-45

Suggested fix:

This was resolved just by adding position: relative to all dropdown links hover states in case anyone else gets this bug:

#lists li:hover a {
    position: relative;
}
Average of ratings: -
In reply to Mary Evans

Re: Theme Essential Chrome Dropdown Menu Flickering

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Fair enough, but at the moment it seems to be an issue with one particular site and not the theme as a whole.  Therefore as time is money I'll not spend any time on it unless paid to do so.

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme Essential Chrome Dropdown Menu Flickering

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Well it does appear to be an isolated case. So I suppose the only other way to test it would be to get access to that web site. But as it is in Australia its not easy re time zones.

Also, you may be interested to know, that in fixing MDL-51820 I found the CSS where FOCUS is listed before HOVER.

Cheers

Mary

Average of ratings: -
In reply to Adam Barbary

Re: Theme Essential Chrome Dropdown Menu Flickering

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Does it work in FireFox and Safari, as well as Edge or IE11? If so then clearly Chrome is at fault.

 

Average of ratings: -
In reply to Adam Barbary

Re: Theme Essential Chrome Dropdown Menu Flickering

by Domnick Andrew -

Hi, I got this same issue, found this page from searching google.

Apparently when I use Chrome Inspect and trace the li items 

There is a css class: .moodle-actionmenu[data-enhanced].show .menu With a position of Absolute and the parent element does not have a relative position. When I remove the position:absolute the flickering stops. I set position relative and z-index:9999.

I don't know if this will work for you but that seems to work on my end.

Average of ratings: -
In reply to Domnick Andrew

Re: Theme Essential Chrome Dropdown Menu Flickering

by Domnick Andrew -

Updated: I dived further and it appears the a:hover, a:active classes in my style.css had opacity values which where causing flicker. After removing them I also managed to stop the flickering.

Average of ratings: -
In reply to Domnick Andrew

Re: Theme Essential Chrome Dropdown Menu Flickering

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Domnick,

Which styles.css file please as there are lots of them?

G

Average of ratings: -