Develop Reference

Shinyapp displays only on left-half of the screen

After a forced reboot yesterday evening, my shinyapp which was working fine for the last 10 months has started displaying only on the left-half of the browser window in edge. The right-half is a blue screen as shown in the picture below. The problem persists on chrome and IE also.
I have restarted R, RStudio and even rebooted the laptop multiple times. I did try the following
shinyApp(ui, server, options = list(width = '100%'))
The plot and sidebar seem to be fixed. When I reduce/increase the screen width only the blue part decreases/increases.
I would appreciate any suggestion to resolve this issue. Perhaps there is a browser setting or js or css code that can override this setting.

This issue is only in one app. Other apps are not affected. It appears that recent update to edge interferes with my custom.css. Once I comment out that line, the blue screen disappears. Most of the customization in custom.css is not necessary now as I am using dashboard themes.
The second issue of only first menuitem not being active is due to image being included in the title bar of the dashboardHeader() with a tags$li(a(href=...,img(src=...), class="dropdown")). It works fine with a icon() or by changing img(...) to tags$img(...). Please note that the opensource consortium setting the rules on how the code should be processed did make a rule change recently. This affected my app.

Scrolling Behavior of Background Image on Deployed Website Is Erratic. It Is Supposed To Be Stationery, Expected Behavior On Local Build

Built a Jekyll website based on a 3-party theme (MASSIVELY).
Code of website available here: https://git.ikrypto.club/FNB_Japan/FNBJapan
When you visit the deployed website, the background image does not remain constant as expected (You can kind of see the expected behavior on the theme demo, https://iwiedenm.github.io/jekyll-theme-massively/ (Edit: This is actually a better example, https://massively.ghost.io/ ). Basically, the background image is expected to remain constant, and the foreground should scroll with the user.).
You can witness the difference in behavior if you go on our website, https://fnb-japan.info .
However, when the code is ran locally and built with
bundle exec jekyll serve
The background image does not move (as expected). What's happening and how can I remedy it?
Note: It appears that this problem only appears on FF Nightly, and not Chrome
Edit: This appears to be a problem with Firefox Nightly, as opposed to the website. This question is technically resolved.
Edit 2: It appears that the problem persists, and is due to a bad implementation of parallax scrolling causing parallax to flicker.
Edit 3: This problem only occurs once the window is of a certain width, and the difference isn'ta ctually between local/deployed but rather different window sizes.

The background div (#bg)
is being transformed by
this code in the bundled parallax plugin (as evident from setting a "break on attribute modification" on the bg element in the Chrome inspector), which in kind seems to be activated by this invocation:
// Background.
$wrapper._parallax(0.925);
Removing those lines should get rid of the parallax effect too.

Page scroll menu not working Firefox and Chrome

I have created my first microsite with Umbraco/ASP.NET at www.surreyhillsmt.co.uk. I started with a bootstrap theme called Agency from startbootstrap.com, and find that the smooth page scrolling from my menu works on the Edge browser and both Safari and Firefox on an iPhone/iPad.
However, smooth page scrolling does not work on either Firefox or Chrome on a PC (fully updated Windows 10, and both Firefox and Chrome installed within last couple of days). This problem is not exhibited by the static bootstrap theme that I used.
I would really appreciate any help. By way of background I am competent with C# and okay with HTML/CSS. I have zero knowledge of javascript and the like.

This is no longer a problem. Oddly this was fixed with the passage of time. I guess it was a caching related issue.

Opening mobile menu in Chrome for Android by setting width only works first time.

So I'm trying to have a mobile menu that slides out on the left when an icon is clicked, and disappears again after you click outside the menu. Like this:
http://codepen.io/anon/pen/LzJuq (old, see new codepen below)
And it works fine on desktop and in Android's default Browser.
On my phone, in Chrome, the menu will only open the first time. Each subsequent time it closes itself before it finishes opening.
I can see that it tries to open... so I assume, because the #menu-icon is actually within the #content, it tries to run them both... but I don't exactly know what to do.
Edit: So I've changed it to just manually set the width instead of adding/remove a class that specifies the width: http://codepen.io/anon/pen/Bmdny
The menu consistently opens now, however the links in the menu seem to be 'transparent' on subsequent opens. I.e, I see the blank background of the menu, but nothing in/on it, but I can still click the links. If I zoom in, even just a little bit, it seems to force the browser to repaint and the menu items appear.
Everything seems to work fine in Android's default browser, just not in Chrome for Android.
I've tried commenting out the css transitions, to no effect. I've tried giving the menu items a z-index higher than the menu itself (I'm desperate, lol), no change.
I just don't understand what's going on.
Thanks.
Info:
Chrome for Android v32
Android 4.3
Samsung Galaxy Nexus

What navigator are you testing it on? I can't reproduce the error on my phone nor my tablet.
However, it seems that as the button is over the #content div, when you click on it, you are clicking both elements.
Try to remove the class only when the menu has it:
$("#content").bind( "click", function() {
if ($('#mobile-menu').hasClass('open'))
$('#mobile-menu').removeClass('open');
});
EDIT
Let's try to put an intermediate layer between the menu and the content. Let's bind the menu-closing event to this layer.
Have a look at this: http://codepen.io/anon/pen/jiyHI

After much searching, tweaking, and hair pulling I began to narrow the problem down to having overflow:hidden; on my menu.
I came across a few random posts of various sources that described a problem similar to mine, and there were always suggestions that it had something to do with the overflow property, but at first I didn't understand.
I was 'hiding' the menu by setting width:0;, so in order to hide the content as well, I had to set overflow:hidden;. If I commented that line out, the menu opened fluidly and consistently, but of course: I could see the menu items all the time. Not what I wanted.
I tried transition the display property to learn that you can't do that. So I tried the visibility property, and at first that didn't work either. However, I came across this post from a guy trying to transition the display property, and this answer happened to work for me.
I still don't understand exactly why this works, I think it has something to do with delaying the second transition so it doesn't stop the first... Here's the article he linked in his answer.
So I guess the problem really had something to do with Webkit and fixed/absolute elements with ul's in them... not repainting after certain... anchor tag clicks? Or transitions? Yeah, I still don't really understand. But it works now!

Firefox textarea typing causing screen shaking (firefox2 winXP)

EDIT: Firefox 2 windows XP
Steps to reproduce problem:
Firefox 2 and visit: http://resopollution.com/rentfox/html/property_setup.html
Begin Typing and pressing [enter key] to create new lines
After about 10 [enter key] presses you'll notice the screen shaking
How this happened
This began happening after I installed a plugin for jQuery. It's located here:
http://resopollution.com/rentfox/html//js/textarea.js
It makes it so the textarea is expandable as I type, depending on how many lines there are in the text area, up to a max-height value which can be specified in CSS.
I tried disabling the 'setHeight' function within this plugin (the only thing that changes height dynamically) but I still saw the screen shaking.
When I think the problem might be
Firefox thinks that the screen just got larger, and compensates by putting in a scrollbar on the right side of the body document.
However, it realizes that in fact the page didn't get larger, and removes the scrollbar, causing the shaking.
I have no idea where in the code that makes Firefox think this way...
Appreciate any help.

You can either force a scrollbar: http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
or hide the overflow of the div and try to get rid of the scrollbar, try overflow: hidden instead of auto in the div propertySetup

Can't reproduce, works fine here in Mac OSX + Firefox 3.5.

I can reproduce it (Debian Lenny, IceWeasel 3.0.6), but only with a very, very specific window size for FireFox (just slightly taller than 1024px, depending on your system font size, window manager and number of toolbars shown).
Just make your page slightly shorter or taller and the problem goes away. The problem only occurs when the addition of a new line after the 10th or so causes firefox to grown the page just enough to cause the scrollbar to appear. Just as you guessed.
That's a tiny 10px margin that is dependent on a lot of browser and system specific settings. In your page that margin is somewhere around the 1024px limit, depending on system font, toolbars, window decorations and the phase of the moon. Move that margin out of the 1024px region. Either make the page 40-50px shorter so that the scrollbar does not appear (even with large system fonts and an extra toolbar) or make it taller so the scrollbar is always there. Zoltan Lengyel's answer in this thread to always force the scrollbar can also be used.

I can reproduce it in Firefox 3.0.11 in Win XP.
Adding overflow:hidden to the body tag seemed to fix the problem, but doing that may wind up causing you more grief then disabling the plugin altogether. Giving the body tag overflow-x:scroll will stick a scrollbar there permanently but seems to solve it, too.

I reproduced it on Windows, FF3.
Interestingly it seems to happen within the jQuery .height() function!
Unfortunately you're using the minified version, so that's as far as I can get.