fa-bars get unresponsive when browser size is reduced

[MayamaTakeshi]

Hello,
I am experimenting devoops using firefox 34 on Ubuntu 14.04 from file://path/index.html
Almost everything looks fine.
However, when I reduce the size of the browser to test how things will look in iPhone, the fa-bars button stops working. Then if I restore the original size of the browser, it starts working again.
I don't see this happening when I run the demos hosted at http://devoops.me/
Is there an explanation for this?

[briansol]

Hi, do you have any F12 Console errors being reported? I don't have this system to try an reproduce it.

[MayamaTakeshi]

Hello,
when I hit "reload" in the browser, I get lots of errors:

file:///home/takeshi/Downloads/devoops-master/plugins/bootstrap/bootstrap.css
file:///home/takeshi/Downloads/devoops-master/plugins/jquery-ui/jquery-ui.min.css
file:///home/takeshi/Downloads/devoops-master/plugins/fancybox/jquery.fancybox.css
file:///home/takeshi/Downloads/devoops-master/plugins/fullcalendar/fullcalendar.css
file:///home/takeshi/Downloads/devoops-master/plugins/xcharts/xcharts.min.css
file:///home/takeshi/Downloads/devoops-master/plugins/select2/select2.css
file:///home/takeshi/Downloads/devoops-master/plugins/justified-gallery/justifiedGallery.css
file:///home/takeshi/Downloads/devoops-master/css/style_v2.css
file:///home/takeshi/Downloads/devoops-master/plugins/chartist/chartist.min.css
file:///home/takeshi/Downloads/devoops-master/plugins/jquery/jquery.min.js
file:///home/takeshi/Downloads/devoops-master/plugins/jquery-ui/jquery-ui.min.js
file:///home/takeshi/Downloads/devoops-master/plugins/bootstrap/bootstrap.min.js
file:///home/takeshi/Downloads/devoops-master/plugins/justified-gallery/jquery.justifiedGallery.min.js
file:///home/takeshi/Downloads/devoops-master/plugins/tinymce/tinymce.min.js
file:///home/takeshi/Downloads/devoops-master/plugins/tinymce/jquery.tinymce.min.js
file:///home/takeshi/Downloads/devoops-master/js/devoops.js
file:///home/takeshi/Downloads/devoops-master/img/avatar.jpg
file:///home/takeshi/Downloads/devoops-master/img/devoops_getdata.gif
GET http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css [HTTP/1.1 304 Not Modified 257ms]
Unknown pseudo-class or pseudo-element '-webkit-inner-spin-button'.  Ruleset ignored due to bad selector. bootstrap.css:153
Unknown pseudo-class or pseudo-element '-webkit-search-cancel-button'.  Ruleset ignored due to bad selector. bootstrap.css:163
Unknown property '-moz-osx-font-smoothing'.  Declaration dropped. bootstrap.css:279
Expected color but found 'auto'.  Expected color but found '-webkit-focus-ring-color'.  Expected end of value but found '-webkit-focus-ring-color'.  Error in parsing value for 'outline'.  Declaration dropped. bootstrap.css:923
Expected end of value but found '\9 '.  Error in parsing value for 'width'.  Declaration dropped. bootstrap.css:938
Expected end of value but found '\9 '.  Error in parsing value for 'width'.  Declaration dropped. bootstrap.css:947
Expected end of value but found '\9 '.  Error in parsing value for 'margin-top'.  Declaration dropped. bootstrap.css:2325
Expected color but found 'auto'.  Expected color but found '-webkit-focus-ring-color'.  Expected end of value but found '-webkit-focus-ring-color'.  Error in parsing value for 'outline'.  Declaration dropped. bootstrap.css:2343
Unknown pseudo-class or pseudo-element '-ms-input-placeholder'.  Ruleset ignored due to bad selector. bootstrap.css:2381
Unknown pseudo-class or pseudo-element '-webkit-input-placeholder'.  Ruleset ignored due to bad selector. bootstrap.css:2384
Expected end of value but found '�'.  Error in parsing value for 'line-height'.  Declaration dropped. bootstrap.css:2405
Expected end of value but found '\9 '.  Error in parsing value for 'margin-top'.  Declaration dropped. bootstrap.css:2442
Unknown property 'user-select'.  Declaration dropped. bootstrap.css:2737
Expected color but found 'auto'.  Expected color but found '-webkit-focus-ring-color'.  Expected end of value but found '-webkit-focus-ring-color'.  Error in parsing value for 'outline'.  Declaration dropped. bootstrap.css:2746
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:2766
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:3194
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:3420
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:4736
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:4737
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:4764
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:4765
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:4772
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:4773
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:4780
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:4781
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:4788
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:4789
Unknown property 'zoom'.  Declaration dropped. bootstrap.css:4795
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5357
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5365
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5434
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5438
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5504
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5508
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5774
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5778
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5779
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5780
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5782
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5788
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5789
Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5790
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5792
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5799
Expected end of value but found '\9 '.  Error in parsing value for 'background-color'.  Declaration dropped. bootstrap.css:5853
Expected 'none' or URL but found 'Alpha('.  Error in parsing value for 'filter'.  Declaration dropped. jquery-ui.min.css:7
Unknown property 'touch-action'.  Declaration dropped. jquery-ui.min.css:7
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. jquery-ui.min.css:7
GET http://fonts.googleapis.com/css [HTTP/1.1 200 OK 123ms]
Unknown property '-moz-border-radius'.  Declaration dropped. jquery.fancybox.css:33
Unknown property '-moz-box-shadow'.  Declaration dropped. jquery.fancybox.css:43
Unknown property '-moz-border-radius'.  Declaration dropped. jquery.fancybox.css:230
Expected media feature name but found '-webkit-min-device-pixel-ratio'. jquery.fancybox.css:260
Expected media feature name but found 'min-device-pixel-ratio'. jquery.fancybox.css:262
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. fullcalendar.css:55
Error in parsing value for 'background-image'.  Declaration dropped. fullcalendar.css:146
Error in parsing value for 'background-image'.  Declaration dropped. fullcalendar.css:147
Error in parsing value for 'background-image'.  Declaration dropped. fullcalendar.css:148
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. fullcalendar.css:187
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. fullcalendar.css:688
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. fullcalendar.css:880
Unknown property 'zoom'.  Declaration dropped. select2.css:9
Expected declaration but found '*'.  Skipped to next declaration. select2.css:10
Unknown property 'user-select'.  Declaration dropped. select2.css:49
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:52
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:53
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. select2.css:55
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:68
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:69
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. select2.css:71
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. select2.css:137
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:201
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:202
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. select2.css:204
Error in parsing value for 'background'.  Declaration dropped. select2.css:260
Error in parsing value for 'background'.  Declaration dropped. select2.css:261
Error in parsing value for 'background'.  Declaration dropped. select2.css:270
Error in parsing value for 'background'.  Declaration dropped. select2.css:271
Error in parsing value for 'background'.  Declaration dropped. select2.css:282
Error in parsing value for 'background'.  Declaration dropped. select2.css:283
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:306
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:307
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. select2.css:309
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:318
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:319
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. select2.css:321
Unknown property 'user-select'.  Declaration dropped. select2.css:395
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:500
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:501
Unknown property 'user-select'.  Declaration dropped. select2.css:582
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. select2.css:585
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:586
Error in parsing value for 'background-image'.  Declaration dropped. select2.css:587
Expected media feature name but found '-webkit-min-device-pixel-ratio'. select2.css:691
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. justifiedGallery.css:82
Expected 'none' or URL but found '"alpha(opacity=70)"'.  Error in parsing value for 'filter'.  Declaration dropped. justifiedGallery.css:113
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. justifiedGallery.css:121
Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. justifiedGallery.css:140
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:49
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:146
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:165
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:170
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:192
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:319
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:329
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:331
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:332
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:530
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:545
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:550
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:569
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:598
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:665
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:705
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:734
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:779
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:797
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:808
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:818
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:820
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:821
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:931
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:956
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1033
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1058
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1067
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1075
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1083
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:1098
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:1100
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:1101
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1244
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1252
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1274
Unknown property 'user-select'.  Declaration dropped. style_v2.css:1281
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:1283
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:1284
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. style_v2.css:1286
Expected color but found 'top'.  Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:1287
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1323
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1401
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1449
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1458
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1483
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1498
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1515
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1540
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1556
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1582
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1629
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1685
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1706
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1804
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1854
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:1899
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:2035
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:2047
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:2049
Error in parsing value for 'background-image'.  Declaration dropped. style_v2.css:2050
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:2187
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:2194
Unknown property '-moz-border-radius'.  Declaration dropped. style_v2.css:2213
file:///home/takeshi/Downloads/devoops-master/img/logo.png
Unknown property '-moz-osx-font-smoothing'.  Declaration dropped. font-awesome.min.css:4
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. font-awesome.min.css:4
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ jquery.min.js:4
not well-formed jquery.knob.js:1
not well-formed jquery.sparkline.min.js:1
Error in parsing value for 'background'.  Declaration dropped. index.html:1
Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. index.html:1
not well-formed raphael-min.js:1
not well-formed springy.js:1
not well-formed morris.min.js:1
not well-formed springyui.js:1

However, these errors don't cause problem to the fa-bars button (and they happen anyway if i go to http://devoops.me/themes/devoops2/).
Then, when I reduce the size of the browser, the fa-bars button becomes unresponsive but no extra errors are logged.

Also, I tested with Chromium (Version 39.0.2171.65 Ubuntu 14.04 (64-bit)) and with this one, the button becomes unresponsive even if I reduce the browser size while accessing http://devoops.me/themes/devoops2/

Which browser/OS do you use? I would like to test it to compare.

[briansol]

I'm on win 7 on chrome and ie11, it works as expected on the demo site and my own port that I use this theme on as well (i am not a dev, just another user like you). I've shrunk it down very thin and tried a few steps in between and it all works.

[devoopsme]

We know problem with fa-bars(need some styling changes for small screen resolution).
In next few days fixed this.

And we liked Firefox and Linux :)

[l7777777b]

im having this problem, its working fine in a resized desktop browser and chrome on android device, but unresponsive (the whole breadcrumb bar is unresponsive) on iphone or you can try it on PC using chrome emulation mode in it's developer tools.