*:hover css problem with bootstrapbase on iOS

*:hover css problem with bootstrapbase on iOS

by Mark Johnson -
Number of replies: 11
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
We're building a theme with bootstrapbase as the parent.  We've come across a strange problem on iOS whereby the first link tapped shows the hover state instead of activating, then the second tap activates the link.  After some reading (this blog post was particularly relevant), I've tracked the problem down to the following LESS code in theme/bootstrapbase/less/moodle/core.less:
.userenrolment .col_role .addrole,
.userenrolment .col_group .addgroup {
    float: right;
    padding: 3px;
    margin: 3px;
    > *:hover {
        border-bottom:1px solid #666;
    }
}

The problem is that *:hover rule.  Remove it, or change it to a:hover, and the problem goes away.

However, this doesn't happen in the clean theme (which also has bootstrapbase as its parent), and if we switch our theme to use clean instead of bootstrapbase as its parent, the problem doesn't happen.  Can anyone suggest what it is in the clean theme that stops this happening, so that we can replicate it in our theme?

(This rule is kind of odd anyway, it causes two icons on the Enrolled Users page to underline on hover which doesn't happen anywhere else that I've seen).

Average of ratings: -
In reply to Mark Johnson

Re: *:hover css problem with bootstrapbase on iOS

by Eric Merrill -
Picture of Core developers Picture of Moodle HQ Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Basically you need to inspect the rules that applying to that link in both cases. If you have theme designer mode on, and it's compiled right, the browser inspectors will even tell you where in the source files the rules come from.

Average of ratings:Useful (1)
In reply to Mark Johnson

Re: *:hover css problem with bootstrapbase on iOS

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

Two things:

  1. When it is there and you are using the browser development tools with the hover state set, what does the list of overridden selectors look like in the Clean theme?  Then you might see what is overriding it.
  2. What happens if you change the '*' to an '&' and recompile the LESS?

Average of ratings:Useful (1)
In reply to Gareth J Barnard

Re: *:hover css problem with bootstrapbase on iOS

by Mary Evans -

Isn't the * something to do with CSS needed for Internet Explorer 8 or whatever version/s is/are a pain in the side?

Average of ratings: -
In reply to Gareth J Barnard

Re: *:hover css problem with bootstrapbase on iOS

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Inspecting the CSS has led me to think that switching my theme's parent the clean is a red herring. Am I now correct in understanding that doing so means my theme inherits only from clean, not from clean and bootstrapbase as I'd originally assumed?  If that's so, then the reason I don't see the problem when my theme's based on clean is that I'm not getting the problematic CSS from bootstrapbase.

Changing * to & results in the somewhat odd selector ">.userenrolment .col_role .addrole:hover", which doesn't actually match the intended element.  However, as we don't end up with *:hover in the CSS, the double-tap problem doesn't occur in my theme. 

I still can't see why the problem occurs in my theme and not in clean, though.

If Mary's correct that *:hover is for IE8 support, does it make sense to change it to a:hover now we don't support IE8? (Or possibly remove this :hover altogether, since the effect it provides isn't consistent with the rest of Moodle).


Average of ratings: -
In reply to Mark Johnson

Re: *:hover css problem with bootstrapbase on iOS

by Mary Evans -

Hi Mark, 

I've just deleted my previous post in answer to your question here because it was too wordy and did not solve anything.

The problem you found I think can be fixed in your theme by adding the following CSS.

.safari .userenrolment .col_role .addrole:hover,
.safari .userenrolment .col_group .addgroup:hover {
     border-bottom:1px solid #666;
}

All it does is styles the hover state of the icon for the class selectors 'add role' and 'addgroup'.

To test just add that snipit to your themes CUSTOM CSS settings page of your theme.

Also I think it might be worth logging this as a BUG in Moodle Tracker.

 Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: *:hover css problem with bootstrapbase on iOS

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Thanks Mary, although I'm afraid that doesn't solve the problem.  The stylesheet still contains the *:hover rule, which appears to be the trigger for the problem.

Just to clarify in case I've not explained it very well, the problem is occuring on all pages using the theme, not just the page that contains the .userenrol .col_role .addrole etc elements.

I have logged the bug on the tracker MDL-52936. Unfortunately I cannot provide precise instructions to reproduce as I haven't found another theme that has the issue.

Average of ratings: -
In reply to Mark Johnson

Re: *:hover css problem with bootstrapbase on iOS

by Mary Evans -

Hi Mark,

Thanks for reporting the bug.

I understand the problem and I have reproduced it using my iPad Mini in the Moodle Demo site, which uses the More theme (a child of Clean theme). So the problem does exist.

You talked earlier of the Parent themes, and how they are sighted in the config.php, at least that is what I assumed you were talking about? This is how it should look:

1. in the theme's config.php

$THEME->parents = array('clean', 'bootstrapbase'); // Order: Parent, Grandparent.

2. in the version.php

$plugin->dependencies = array(
    'theme_bootstrapbase'  => 2015111000,
    'theme_clean'  => 2015111601,
);

I'll go and checkout MDL-52936 and submit a fix for it, and put it up for Peer Review.

Cheers

Mary

Average of ratings:Useful (1)
In reply to Mary Evans

Re: *:hover css problem with bootstrapbase on iOS

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Hi Mary,

That's great, thank you! I'm glad that you're able to reproduce it.

Average of ratings: -
In reply to Mary Evans

Re: *:hover css problem with bootstrapbase on iOS

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Hi Mary,

Did you get a chance to look at this yet?  I'm happy to prepare a fix myself if not.  Do you agree that changing *:hover to a:hover would be a good solution?

Thanks

Mark

Average of ratings: -
In reply to Mark Johnson

Re: *:hover css problem with bootstrapbase on iOS

by Mark Johnson -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
For info, I've now submitted a patch.
Average of ratings: -