CSS3 issues in IE10+ and ArcGIS javascript API - css

I have a map built using the ArcGIS javascript API, and everything works except some CSS I want to apply to some labels. That doesn't work in IE10+.
To apply the CSS to the labels I listen for the graphic-node-add event, and apply the CSS to the graphic node:
on(layerLabels, 'graphic-node-add', function (addedGraphicNode) {
addedGraphicNode.node.style.textShadow = "1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white";
});
This works in Chrome and Firefox, but IE doesn't like this, and the text shows up normal. And it's not just the shadow that doesn't work in IE. No CSS I apply this way works in IE.
However this, added in the style tag, does work, and shadows the text of the scale bar in all browsers including IE:
.esriScalebarLabel{
color:black;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
I've tried a couple different ways to get the CSS to work on the labels in IE, including catching the graphic-draw event, rather than the graphic-node-add event, as well as style.setProperty("text-shadow",...) method, and both fail. Any ideas?
EDIT 6/4/15
Here's a fiddle showing the issue...
http://jsfiddle.net/gvgwybta/1/
The map doesn't show up quite right, but the labeling issue can still be seen. Chrome, label shadows work. IE, they don't.

Related

If site is build for modern browser, is box-shadow a perfect alternative to border?

Border example
border: 1px solid #d9d9d9;
Box-shadow example
box-shadow: inset 0 0 0 1px #d9d9d9;
If site is build for modern browser, is box-shadow a perfect alternative to border?
A border is part of the element and influences its size. A shadow does not.
Also, browser support for old browsers might be missing.

text-stroke cross browser

I'm trying the new text-stroke features and I've searched the web for a cross browser solution. For now I only could find it with webkit properties.
-webkit-text-stroke: 2px #FF1E00;
Could you let me know if there is a way so all browsers will display in the same way?
.strokeme
{
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
from: Outline effect to text
"What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe)."
As of May 24th, 2012, there is no cross-browser solution, as only webkit supports the experimental feature according to http://caniuse.com/#search=text-stroke. You can simulate this (to some degree) with 4 or 5 text-shadow's on an element.
Demo: Text Stroke, on CSS-Tricks.com
You could try strokeText.js, a vanilla javascript plugin.
Strokes do not overlap your text like they do with
-webkit-text-stroke
Supports all browsers except IE8 and below
Selectable text
Dependency-free
Full disclosure, I made the plugin.
This can't be done natively cross-browser, but it can be implemented with a fallback for unsupported browsers:
color: blue;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 3px;
That way, webkit browsers will display white text with blue outline, but other browsers will still display the color of your choosing (this case blue).

CSS3 Technique for White-Outlined, Red Text

I'm not associated in any form with the following page:
http://www.wpsyndicator.com/
However, as you can see on that page, they used images to show the white-outlined, shadowed, red text. Is there a way in CSS3 to implement this feature? I mean, I can handle the shadow and the red, but the white font outlining is not something I'm familiar with.
You are looking for text-stroke.
-webkit-text-stroke: 1px white;
It is only supported by the web-kit for now, you can see the compatibility list here http://caniuse.com/text-stroke
More Info:
http://css-tricks.com/adding-stroke-to-web-text/
http://www.webkit.org/blog/85/introducing-text-stroke/
Here is an example from David: http://jsfiddle.net/davidThomas/h5J6K/2/
You can use the css3 text-shadow property to achieve this effect. Will not work in IE tho so will have to find some one to emulate the effect in that browser. The code looks like this...
#myDiv {
text-shadow: 1px 1px 1px #fff, 2px 2px 1px #fff, -1px -1px 1px #fff, -2px -2px 1px #fff;
}
The first argument is the horizontal distance from the text, the second, the vertical, the third is the blur. the lower this number the less blur. you do negatives to go up or to the left. This is cool and you can do some really neat effects with this. Hope that helps

IE filters - Shadow acts on text; Gradient+Shadow acts on box?

When I attach the following to a div, I get a box with a gradient and a box-shadow in IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#D08080', EndColorStr='#E7A292') progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=170, Color='#B8B8B8');
However, when I'm doing JUST the shadow filter, I'm getting shadowing on the text inside the div. Other than the obvious (and ugly) hack of setting a filtered gradient with a constant color, how can I get a simple div to shadow itself rather than its text in all versions of IE?
IE's filters are always an ugly hack, can be hard to get right, and very often cause weird bugs. My recommendation is to avoid using them wherever possible.
Take a look at CSS3Pie for a neat way around the issue.
CSS3Pie is a hack for IE that allows it to use standard CSS properties instead of filter for gradients and box shadows. It also does border-radius.
I hope it'll solve your problems.
There is a way to this in IE without CSSPie. The issue in IE 7 & 8 is that the element to which the shadow is applied, needs to have a background color set. Otherwise the shadow is inherited by child elements (including text).
This is how I achieve a cross browser box-shadow. This should work for IE 7-10, All Chrome & FF release that I have ever tried and Safari too. Ignore my color choices, obviously you'll need to set them to whatever works for your page.
.wrapper {
border: solid 1px #A7A7A7;
background-color:#ffffff;/*transparent won't work*/
}
.shadow {
-moz-box-shadow: 2px 2px 3px #A7A7A7;
-webkit-box-shadow: 2px 2px 3px #A7A7A7;
box-shadow: 2px 2px 3px #A7A7A7;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#A7A7A7');
}
Then just apply both classes to the parent element
<div class="wrapper shadow">
<div id="someInnerDiv">
<p>Some text that used to inherit the box-shadow, but doesn't anymore</p>
strong text</div>
</div>

CSS3 Gradients and border-radius leading to extraneous background in webkit

After my 1st question with relation to CSS3 gradients in which I was recreating an 'inner glow' I've now got to the point where I'm not so happy with the way in which webkit renders the effect.
Basically, if you give an element a background colour and apply a border radius to it, webkit lets the background colour "bleed" out to fill the surrounding box (making it look a bit awful)
To reproduce the undesirable effect, try something like the following
section#featured footer p a
{
color: rgb(255,255,255);
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
text-decoration: none;
padding: 5px 10px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: rgb(98,99,100);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25);
}
Apparently this appears to be a Windows-only problem, so for those on a Mac, here's a screenshot: (Check the 'carry on reading' button)
(source: friendlygp.com)
You'll notice that in Safari/Chrome (the latest available public downloads as well as the latest nightlies as far as I can tell), you get a rather ugly background colour bleed. However, in Firefox, you should be able to see what I'm after. If you're in Internet Explorer, woe betide you.
Does anyone know of a technique which will allow me to produce the 'correct' effect? Is there a CSS Property which I've missed that tells webkit to only have the background within the border-radius'd part of the containing box.
I could potentially use an image, but I'm really trying to avoid it. Naturally, as we're dealing with CSS3 and the landscape is continually changing, I might just have to 'lump' it and revert to an image.
However, if anyone can suggest an alternative I would be very much appreciative!
Finally, after an awfully long time, someone much cleverer than I has a solution to this:
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
is your friend :)
From: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
This is, unfortunately, a known bug. You can sorta work around it by giving your element a background-coloured border big enough to cover the leaking inset shadow, but it's far from an ideal solution.

Resources