*:hover css problem with bootstrapbase on iOS

*:hover css problem with bootstrapbase on iOS

由Mark Johnson發表於
Number of replies: 11
Core developers的相片 Particularly helpful Moodlers的相片 Peer reviewers的相片 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).

評比平均分數： -
In reply to Mark Johnson

Re: *:hover css problem with bootstrapbase on iOS

由Eric Merrill發表於
Core developers的相片 Moodle HQ的相片 Peer reviewers的相片 Plugin developers的相片 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.

評比平均分數：Useful (1)
In reply to Mark Johnson

Re: *:hover css problem with bootstrapbase on iOS

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 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?

評比平均分數：Useful (1)
In reply to Gareth J Barnard

Re: *:hover css problem with bootstrapbase on iOS

由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?

評比平均分數： -
In reply to Gareth J Barnard

Re: *:hover css problem with bootstrapbase on iOS

由Mark Johnson發表於
Core developers的相片 Particularly helpful Moodlers的相片 Peer reviewers的相片 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).


評比平均分數： -
In reply to Mark Johnson

Re: *:hover css problem with bootstrapbase on iOS

由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

評比平均分數： -
In reply to Mary Evans

Re: *:hover css problem with bootstrapbase on iOS

由Mark Johnson發表於
Core developers的相片 Particularly helpful Moodlers的相片 Peer reviewers的相片 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.

評比平均分數： -
In reply to Mark Johnson

Re: *:hover css problem with bootstrapbase on iOS

由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

評比平均分數：Useful (1)
In reply to Mary Evans

Re: *:hover css problem with bootstrapbase on iOS

由Mark Johnson發表於
Core developers的相片 Particularly helpful Moodlers的相片 Peer reviewers的相片 Plugin developers的相片

Hi Mary,

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

評比平均分數： -
In reply to Mary Evans

Re: *:hover css problem with bootstrapbase on iOS

由Mark Johnson發表於
Core developers的相片 Particularly helpful Moodlers的相片 Peer reviewers的相片 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

評比平均分數： -