Bing Maps Issue on Safari 7 - javascript

So i am having an issue in which the bing maps are not rendered completely on Safari 7. They are loaded fine on Chrome and IE.
Example - copy and paste the link into Safari 7 on a Mac :
http://www.levi.com/GB/en_GB/findAStore
As You can see only half the map renders the other half is gray, i get no errors in the console,
the only warning i get is:
"Invalid CSS property declaration at:* style.css"
Is anyone else running into this issue? is there a fix for it?

Try text-align:left in the style of the mapViewer div, it is likely that the map is inheriting the property text-align: center and that also applies to images of the map

Sytle.css is a file in your website. Start by looking into that file. Maybe comment out the reference and see if the issue still persists.
Bing maps works fine in Safari 7. The forum post you saw on the Bing Maps forums about Safari 7 ended up being an error in the users code and not with Bing Maps.
In your case you have not specified a css position, width or height property for the map. This is the #1 cause of issues between different browsers. IE and Chrome are fine with this, but other browsers like Safari require these to render correctly.

I also encountered this issue. text-align: center causes it and text-align: left fixes it.
rbrundritt, as this problem has come up repeatedly and your answer is always that the issue is style position, width, or height, you should know that the issue is that the div's text-align style impacts the rendering of the maps on Safari and iOS in Bing 7 and that setting to text-align: left will fix it.

Related

Misalignment and Black/Blank upload when cropping images with Croppie.js and a Modal

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.

leaflet.js IE11: Tile imgs are not visible but they are still in the DOM

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)

Grey grid showing up on google maps

So, I implemented google maps to our website but for some reasons since yesterday a grid appeared on the map when I browse the website with chrome but not with firefox.
And If someone else browse the website with chrome the grid isn't displayed.
I'm having a hard time finding out why I see this grid
Here is a picture of the map
This is a bug in Chrome, see this issue in Google Maps Javascript API issue tracker
It surely is a bug in webkit browsers not only Chrome.
I managed to fix this by adding this css:
.gm-style div {
-webkit-transform: scale(1.002);
}

Black blocks on Google map API v3

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.

Internet Explorer 7 Google Map Rendering Problem

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%?

Categories

Resources