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)
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
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.
I have problems with embedded Google map. I'm using API v3, and for some reason black blocks are rendered behind map controls and marker.
Here's the screenshot:
I only have HTML5 doctors reset stylesheet, and some very simple custom styling for layout and typography. when I refresh page whole map blinks for a moment and then black blocks are rendered.
Here's codepen, but map is not displayed there for some reason. I have marked it with: [GOOGLE MAP] so it's easier to find.
http://codepen.io/Jinx/pen/bcrpn
[UPDATE]
I have created new html without any content except map div element and all scripts and css files from original html are included and map works properly.
This confuses me because it would appear that this bug is due to HTML surrounding the map?
[UPDATE2]
I got map to render on code pen but it has no controls and no marker. Still same result on local version.
Could it be because I'm working locally?
[UPDATE3]
I just checked in Firefox, Internet Explorer 9, Opera and Safari and map is rendered perfectly. This seems like Chrome bug.
Also, I have noticed that chrome is offsetting all element boxes out of browser window visible area. Here's a screenshot.
Inspectors in other browsers show boxes normally.
It would seem this was indeed Chrome bug. I have just made copy of my project folder, and opened index.html from there and everything is fine.
I guess this was some cache problem/bug.
It is black because you have a CSS style setting it to black with a color or image that is being inherited. Check your CSS for #000000 as a background color or url() for an image.
Hi I'm having some trouble with IE7 when doing a map.
I've made an xml and ajaxed it to grab points based on where the user is on the map.
It works well, and in FF, IE8 no problems when they click the points. On IE7 it firstly misses the cross at the top right, has some problems with the border (fixed that with some margin) and more importantly cuts out an portion of the image which I can't figure out.
I've attatched an image and what you see there is basically an a tag with a background image.
I've taken the title out as I thought that might cause it. Basically I'm stumpped any ideas.
Thanks
Richard
There seems to be a bug in Internet Explorer which has to do with how transparent PNGs are scaled when using the Zooming feature of the browser. It's difficult to reproduce because it's a local browser setting.
It happens even in maps.google.com. See the example below at 125% zoom, using Internet Explorer 8:
Is your zoom set to anything other than 100%?