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.
Related
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.
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)
We have a website whose background is a stack of images through which we go with JavaScript.
We check whether the next image is loaded before switching to it, and it works fine on Chrome, Safari, IE, and all mobile browsers, however on Firefox we sometimes get a white flash.
This problem also happens if we make sure that all the images are preloaded so it's not a problem that FF shows the image before it has finished loading. I've seen the question asked elsewhere but from the user's perspective, and the solution was to disable hardware graphics acceleration, which does not solve completely the problem but reduces it. However we obviously can't ask that from our users.
Similar problems were reported in other questions:
jquery animate (height) causes background-image flickering in firefox
Image Flickering only in Firefox
Firefox background image flickering when using multiple instances and background-size
skrollr background image flicker in Firefox
However none has a clear solution. Does anyone know how to correct for this?
Cheers!
I was working on an image gallery and it involved some heavy image moving\resizing using javascript. Everything worked like a charm on all the broswers except for IE6\7 (no wonder) and ... Google Chrome.
Basically under certain zooming each movement made Chrome redraw the background, making it jitter, change its position and then move back. I can't post link to the actual script at the moment, but I used a jquery plugin to immitate the problem:
http://danilsk.narod.ru/wtf.html (try zooming in and out and clicking images)
Does anyone know how to fight this?
I am using google chrome and I see no issue here.
Everything is running very smoothly. Try updating your browser.
FYI:
Ubuntu 10.04 LTS - the Lucid Lynx
Google Chrome 8.0.552.215