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.
Related
When working on a website on my local server, I came across an issue with Croppie.js. The issue only happens when a modal is used to crop the image — for example, everything works fine here:
[codepen](https://codepen.io/azerafati/pen/VzOGRe)
I was able to reconstruct the issue on Codepen using the following image.
The Issue
With a modal on Codepen, the issue only happens in the Editor view — Image B:
[codepen](https://codepen.io/amatek/pen/GREvEbG). Surprisingly, everything seems to work as expected in the Details view — Image A: [codepen](https://codepen.io/amatek/details/GREvEbG).
Normal behaviour: When using the zoom slider on the modal in the Details view, the image is transformed from the center.
The bug: However, the image is transformed from a corner when in the Editor view. This somehow leads to a black image being uploaded when the crop button is clicked.
Sometimes (depending on the amount of zoom applied), instead of a black image:
only the left side of the image is uploaded with the right side is
cut off; or
the image is uploaded zoomed in to the corner.
There is still misalignment even when the zoom is not applied.
Environment
From my tests so far, this issue does not happen on mobile browsers (although I only tested with Google Chrome and Mozilla Firefox). I have noticed the issue on Desktops with Windows 7 and 10 (I am yet to test on other Operating Systems).
Bug Present
Windows 10: Google Chrome and Microsoft Edge
Windows 7: Microsoft Edge
No Bug
Windows 10: Mozilla Firefox
Windows 7: Google Chrome and Mozilla Firefox
My Efforts so far
I have tried debugging the croppie.css and croppie.js files, but to no avail. However, I strongly suspect the problem lies in the js file. It might have something to do with the the css transform-origin property or the functions for obtaining the image dimensions returning different values on modals. Does anyone have an idea on what the cause of this issue might be?
Got this problem on latest Chrome when used croppie inside of modal
Helped me to change style in bootstrap modal .modal-dialog class
image
Style that you need to update
Setting transform to unset instead of using translate function.
Hope it helps you too
It appears that the extra padding applied to the outer modal div by bootstrap when triggering the modal('show') was what caused the problem, for me at least. Once I removed the extra padding the problem was fixed. Seems like this padding somehow messed with the point calculation when cropping or moving the viewport. I'm still using an older bootstrap version though, so I'm not sure if that would be a fix for the newer ones.
I had this problem on Chrome only probably caused by their last update, since everything was working fine for some time now. On Mozilla there were no issues to begin with.
this is a strange one. when I look at my application products screen some images are position differently to others and are more central. when I try and recreate this in google chrome or firebox browser with the dev tool and mobile view they are positioned correctly. its just showing this strange positioning on some images. As it is only showing as problem on my samsung s10 and not in the browsers I cant troubleshoot. any help or ideas would be appreciated.
The link to the hosted app is here and would need to be viewed on a mobile to recreate this problem, thanks
https://webdev-davidm.github.io/E-commerce-front-end/#[![enter image description here]1]1
check your browser you might need to add some libraries..not sure which one you can check this on mdn documentation
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.
I am working with leaflet to render construction plans for our software. The plans are jpg tiles.
It worked since about 9 months in the browsers IE11, firefox, chrome, safari. But since yesterday I cannot see the tiles in IE11 but it loads the tiles and the tiles are also in the DOM. I thought it is maybe a CSS issue, but I am not able to fix it.
Does someone know which issues this could be?
leaflet version: 1.2.0
leaflet.markercluster: 1.2.0
It is a react application with react 16
Thank you for your help.
I checked the network connections and paste the tile links in a new tab, everything worked.
Then I found out that there was a visibility: hidden css attribute active. I set it to visible but then there were just small icons with in a x in it, so that the image wasn't loaded.
Next we analyzed what we have changed in the last time and we found out that we changed the URL of the tiles because of security issues.
And then we compared the old and the new image responses and found out that there was no Content Type set in the response.
So this was the issue.
Leaflettiles in IE11 need the right content-type in the response of the image (in our example it is image/jpeg)
When I hover over a menu in Chrome (Version 21.0.1180.79) only (not all webkit) and then unhover a portion of the menu is ghosting (staying in place) until an element is adjusted in it's place in which case the overlapped area goes away.
For example, on the page: http://www.georgianc.on.ca/student-success/ if you hover over 'Co-op and Career' (in chrome) and then unhover you should see the issue.
This question appears to be the same issue (I can't tell for sure as the example was taken down) but I can't find any 'visibility' rules that apply to the menu in question... need fresh eyes? css menu hover "hangs" in chrome & safari
Screenshots:
after unhovering
after unhovering and then the slide changing
can't reproduce on windows x64 gc v 21.0.1180.79 m
check if you have any plugins that may interfere with the website, like JQuery Injector, KB SSL Enforcer...
For example I am using KB SSL Enforcer and I could not see your website because of it.
For some reason, the problem appears to be fixed if you set position: static on #menu-item-197. I don't know why, though, and it probably shouldn't ghost in the first place - but at least it works!