Cross-device CSS problems

Question

I just tested my website with both Google Chrome Desktop and Mobile version, and it seems like the label for the slide-out menu is not displaying. It does work, it's just not displayed, and I have no idea why. Changing positions does not work here, because the slide-out design I'm using is relying on positions, and I need them to be fixed.

Related CSS:

#slideout #label {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    display:block;
    float:right;
    margin:46% 0 0 0;
    padding: 0 2px 6px 2px;
    font-size: 20px;
    position: fixed;
    left:-36px;
    -webkit-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    -moz-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    -o-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
    background-color:#fff;
    border-bottom:0 !important;
    border-radius:8px 8px 0 0;
}

#slideout.opened #label {
    left: 86px;
}

JavaScript:

$('#label').on('click',function(){
    $('#slideout').toggleClass('opened');
});

EDIT: I tried using this code:

#slideout #label {
    position: absolute;
    left: 90px;
}
#slideout {
    position: relative;
}

But What happens is, the label is in the right place, but it is cut off and invisible.

score 2 · Answer 1 · answered Jan 28 '13 at 22:47

2

position:fixed is unpredictable on mobile, you should be able to fix it by switching to position:relative; even though that may be difficult. There is some decent coverage on this here: http://www.quirksmode.org/blog/archives/2012/10/budding_consens.html

answered Jan 28 '13 at 22:47

Nat Taylor

96
1

Just changed to `position: relative;` and now it's invisible on desktop, too. It's not possible for me to change the positions, because it will screw up everything. – SeinopSys Jan 28 '13 at 22:48

Kev · Accepted Answer · 2013-02-02T18:08:55.130

1

Look at the opacity property of your slide panel.

You set opacity to 0.3 when hiding the panel, your label is inside your panel, so it fades too.

But it looks like there is some problem in chrome mobile, and opacity property. the button disappears completely. You should try to put it outside your panel. When I disable the opacity : 0.3 of the slide panel in chrome inspector, the label appears.

I think you should investigate this.

edited Feb 02 '13 at 18:08

answered Feb 02 '13 at 17:49

Kev

4,017
4
26
47

You were right. I had to move `#label` outside of `#slideout`, now it works perfectly! – SeinopSys Feb 02 '13 at 21:26

score 0 · Answer 3 · answered Feb 01 '13 at 03:19

0

Try the following in addition to what you have:

#slideout {
    position: relative;
}
#slideout #label {
    position: absolute;
    top: 46%;
    right: -10px; (approximate)
}

Obviously, these are overrides for a couple, so integrate them at your discretion. Also, remove the float: right;

answered Feb 01 '13 at 03:19

mpowered

11,779
2
11
18

Changing positions does not work here, because the slide-out design I'm using is relying on positions, and I need them fixed. – SeinopSys Feb 01 '13 at 16:02

score 0 · Answer 4 · edited May 23 '17 at 12:12

That's only a guess, but the problem might come from the javascript event handling which is different on a mobile because the event is actually different. I guess the click event is triggered twice on mobile, something like "touch" or "mousedown", so therefore, the event happening twice, the toggleClass() adds and remove the wanted class. So either you detect mobile with javascript in order to add the correct event Detecting a mobile browser (detect mobile) jQuery mobile (click event) (appropriate event) Or you change the toggle class for "addClass" and "removeClass" with a timer. Something like

var animating = false;
var open = false;
$('#label').on('click',function(){
   if (!animating) {
       animating = true;
       if (open) {
          $('#slideout').removeClass('opened');
       } else {
          $('#slideout').addClass('opened');
       }
       setTimeout(function() { animating = false }, 500); // 500 = 0.5s of css animation
   }
});

Hope this helps.

The sidebar label does not show after load, while on the computer it does. The problem cannot be in the click event handler, because it's not fired when the page loads, and the label is not visible even before clicking it. — SeinopSys, Feb 01 '13 at 16:04

score 0 · Answer 5 · answered Feb 01 '13 at 18:25

0

use postion:fixed in your css along with respective width-height property.

answered Feb 01 '13 at 18:25

Rahul Murari

339
1
4
13

1

Be a bit more specific please. – SeinopSys Feb 01 '13 at 18:38

Cross-device CSS problems

5 Answers5