I am displaying a set of properties on Bing map. It works all fine in Chrome, FireFox, IE, and Safari on Windows (version is 5.1.7 - their latest version for Windows). But it doesn't work in Safari 7 on Mac.
When displayed correctly, all properties are located on a green residential area. But on Safari 7, all properties are displayed on the far left of that area - on a totally wrong location. Also, the larger left part of the map is blank (there is no map!).
I saw a similar post Bing Maps Issue on Safari 7. The left part of their map is also blank. The problem there seems not solved. I followed Microsoft's guideline (meta, CSS position/width/height etc), none of them work.
I suspect that's a Bing bug? Or a Safari bug?
Sorry I don't have enough reputation to post images...
Now that I solve the problem, I confirm that this is NOT a bug of Safari or Bing.
the <div> that load the the map is embedded in many other divs, panels, fieldset, Telerik ajax panel, RadTabStrip etc. You have to remove some of divs, and also some styles of divs to make it work. It's tricky, you have to do many tests to finally pin down which element caused the problem and remove that element.
I took me several days to figure this out.
Related
L20n is really helpful when it comes to implementing a localization requirement in our web application project and works perfectly fine in Chrome and Firefox and almost gets us there in Internet Explorer 11.
We are using HTML (which is supported) in the translation strings, they are formatted like this example:
"About <strong> a </strong>"
It works beautifully in Chrome and Firefox:
Translation result in Chrome
Unfortunately when I switched to Internet Explorer 11, getting this lovely sight on the same part of the page:
Translation result in IE 11
We're not doing anything weird or super special, it's pretty basic implementation.
Question is - has anyone encountered this issue while working with l20n and if so - is there anything that can be done to get Internet Explorer to render tags in translation strings?
After help from #Sampson (cheers!) and pointing out that a) It was issue on IE11/Edge Mode not Edge b) IE11 does not support one of the HTML5 elements such as Template, I dug around a little bit before I was about to announce complete defeat and digging through l20n github pages:
l20n compatibility
Using babel polyfill
Using patched webcomponents HTMLTemplateElement polyfill (link provided on page
I added babel and modified polyfill js file and after quick deploy and nervous refresh, it appeared the solution worked. Testing it as we speak so that it doesn't cause issues with the app but all looks good so far.
I know this is a workaround but our IE traffic is small enough yet I was not able to give up on these users that would like to use what I am currently working on in Irish and coincidentally would end up using IE11.
Due to the lack of support for the <template> element in Internet Explorer 11, the following fails:
// https://github.com/l20n/builds/blob/0d58a55afa6ae5aa868b8002fae5ee0e2124e35d/l20n.js#L94
var templateSupported = 'content' in document.createElement('template');
It's worth noting that the l20n.js team doesn't consider IE to be supported.
Im a new developer, and I just finished my first site. Works fine in all browsers, except safari.
Unfortunately I didn't install a copy of safari while I was developing it, so these issues went unnoticed. I did check every other large browser tho.
Figuring, if it worked in IE it should work in anything else...
Please open up www.enniya.net in safari, and than in chrome or some other browser to see what I am taking about.
By looking at it I do have a theory.
The background, font, colors, transparencies of divs, border colors, thats all their, but the positioning is destroyed.
But the logo position is correct, so my first theory is that
90% of the content is positioned with vw and vh
while the logo actually uses % for positioning...
Except that the latest readings tell me the newest versions of safari understand VH and VW ??? So I dont know.
If you need to see my code let me know, I didn't provide it initialy because Im not really sure what specifically I could provide that would solve this problem.
I'm having a problem with Twitter Bootstrap Inputs showing correctly on safari 6.0.
Im pretty sure this was fine before I moved to Mountain Lion, and it does seem to be an issue with Chrome.
Basically in Safari, the right end of the input seems cut off an is not displaying correctly. Ive taken a screen shot to demo what I mean...
Safari:
Chrome:
Any ideas?
EDIT: Just looking at the Twitter Bootstrap site and I see that alot of their inputs have the same problem!
Anyone else seeing this?
The artifact appears to be an issue with Safari's rendering of border-radius, and is not specific to Twitter Bootstrap. See rendering borders on Apple's support forum. The inputs usually render normally after you select them.
Disabling border-radius on the affected elements with the following two lines removes the artifact. Be careful though, sometimes this causes even more puzzling artifacts on nearby buttons.
-webkit-border-radius: 0;
border-radius: 0;
When embedding html inside of SVG using the foreignObject tag, webkit based browsers render the backgrounds of the embedded html elements behind the svg elements. See http://code.google.com/p/chromium/issues/detail?id=35545 .
Here's an example : http://www.mxgraph.com/demo/markup/webkitbg.html
The green div should be on top of the red.
Does anyone know of a workaround for this issue? Maybe some incantation of z-index and/or grouping of elements or something in svg to fool webkit into doing the right thing?
This is webkit bug 58417, fixed on 2011-11-10. The fix is in Chromium version 17, which is currently in beta as of 2012-01-09, and should be released in early February. Not sure when the fix will land in Safari, but luckily I don't need to support it.
So the workaround seems to be "wait a month"...
I've just been hit by the same issue. Even though the bug is fixed since a long time in Chrome, Safari seems to be ages behind with the codebase.
My solution is to add style="display:inline-block" to the first child of the foreignObject tag. This seems to fix the problem.
I've finished a site but it doesn't work well on Safari.
I used (don't blame me!) frames and two white weird spaces appeared on the left ant the right of the frame "body"
you can se the result here:
http://www.yves-ratheau.com/
I didn't find any help on google, forums, etc...
thanks to any suggestion
Since I'm installing windows on my main Mac, I grabbed a really old laptop (Powerbook g3/safari4.04 on OS X 10.4.11) to test this and didn't get any white lines anywhere. What safari version are you using to test?
You may need to set some CSS padding/margin/border styles to "none" to have it work in older versions of Safari, but I've never seen this problem before.