can not work in IE ?

[littlee]

seems custom tag does not be supported IE

[hhsnopek]

Hey @littlee could you provide which version of IE as well as the json object you're passing into the ShareButton instance?

[littlee]

I just open the demo page in IE 11, but the button did not show up

[almoral]

Hey I'm having the same issue with IE 11. This is the json that I'm passing in:

        var share = new ShareButton({
            networks: {
                facebook: {
                    app_id: "xxxxxxxxxxxxxx"
                }
            }
        });

There are no error messages for me. It simply doesn't show up in the page.

[almoral]

I found this online:

Windows Internet Explorer's support for custom tags on an HTML page requires that a namespace be defined for the tag. Otherwise, the custom tag is treated as an unknown tag when the document is parsed. Although navigating to a page with an unknown tag in Internet Explorer does not result in an error, unknown tags have the disadvantage of not being able to contain other tags, nor can behaviors be applied to them.

Source Link

[hhsnopek]

This is very uneasy considering that before I pushed to make the switch to using custom tags I tested <share-button></share-button on IE and everything rendered and worked properly, minus a few IE quirks in our stylesheet. I do need to look into this more, if anyone finds more references or helpful documents please add them to the thread

[almoral]

Unfortunately I'm not getting an error in IE 11. It simply doesn't appear. I do get one in IE 9 but that's because of the use of classList. I'm assuming you don't plan to support IE9.

Here's a link to a test page.

Maybe you'll have better luck and get an actual error message in IE.

[hhsnopek]

If I recall the discussion correctly, the plan was support IE10 and higher

[almoral]

That makes sense. This is still happening in IE11 for me though. I wish I could provide more information.

[almoral]

I took a look at the styles that are being applied and display is set to 'none'. I'm looking through the code to see where that might be happening.

Updated: It looks like it might be the fact you're setting display to initial. IE doesn't support that. Here's a link to MDN

[ehigz]

I was able to fix it by detecting whether it's IE using JS on my html page (index.html):

<script language="JavaSCRIPT">
       function msieversion(){
          var ua = window.navigator.userAgent
          var msie = ua.indexOf ( "MSIE " )

          if ( msie > 0 )      // If Internet Explorer, return version number
             return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
          else                 // If another browser, return 0
             return 0
       }
</script>

(source: https://support.microsoft.com/en-us/kb/167820)

and then modifying share-button.js like so:

 /**
       * @method _show
       * @description Change element's display to 'block'
       * @private
       *
       * @param {DOMNode} el
 */
   {
      key: "_show",
      value: function _show(el) {
        el.style.display = "initial";
// my fix to make share-button element show in IE10 (haven't tested other version). 
//Can swap out 'inherit' with any display property.
        if (msieversion() >= 4) {
          el.style.display = "inherit";
          //console.log("This is Internet Explorer 4 or later");
        }

      }

[almoral]

Yeah browser sniffing is not the best approach. I just fixed it by changing the line

 el.style.display = "initial" 

to

el.style.display = "inline-block"

No browser sniffing and it works everywhere I've tested.

[hhsnopek]

This is great guys! @almoral which versions of IE does that work on?

[warch]

when does this change go live?

[almoral]

Inline-block works everywhere. I had a second issue with IE in that you use classList. So I used the classList.js polyfill. With that polyfill in place and display set to 'inline-block', this works in IE 9 +.

Here's a link to the polyfill.

[touchweb-vincent]

Thank you for the tips, i edited my source too for 'inline-block' instead of 'initial', works fine now on IE 11.

I got another bug on IE9 when configuring your plugin like this : var shareButton = new ShareButton({ ui: { flyout: 'center bottom', buttonText: 'PARTAGER' }, networks: { googlePlus: {enabled: true}, twitter: {enabled: true}, facebook: {enabled: true}, pinterest: {enabled: true}, reddit: {enabled: false}, linkedin: {enabled: false}, whatsapp: {enabled: false}, email: {enabled: true} } });

It throws : Impossible d’obtenir la propriété « add » d’une référence null ou non définie, which might be translated by : Impossible to get the property "add" of a null or undefined object.

Any ideas ?

[simsketch]

@vincent-guesnard try it with flyout: 'bottom center'

[hhsnopek]

Hey guys any luck here, @vincent-guesnard?

I'm making note of adding the polyfill (provided above by @almoral) for IE9 support, but it maybe in a separate release than the mainstream release :smile:

[hhsnopek]

Going to get this figured out before the next release tomorrow morning - most likely wont have the IE9 polyfill, but I'll add a way to build it to the gulp tasks. (maybe even add it to the release files :wink: )

[hhsnopek]

is anyone here able to check if #257 solves the problem at hand? I don't have a box for IE currently

[RedPointMS]

This still doesn't work in IE11 (button doesn't appear) nor in MS Edge browser (button appears but the svg graphics are not rendered). Changing the el.style.display to "inline-block" shows the button in IE11 but like with Edge the graphic is now shown. This is a serious usability problem as there are lots of users running Windows either or their laptops or tablets. Would anyone be able to look at this?

[hhsnopek]

@RedPointMS could you take a look at the latest changes on master? Still need someone to test this out for me as I don't have a windows machine

[RedPointMS]

It doesn't work for me. I am getting error in share-button.js: Unexpected use of reserved word 'import'

[hhsnopek]

@RedPointMS you'll have to go ahead and build the project unless you're in a browser which supports ES2015

[RedPointMS]

I tried to build the environment but unfortunately npm install fails with several error messages fetch failed with status code 504. It seems that it is related to [https://github.com/npm/npm/issues/12001]. Could you create distribution files on your environment? I will be happy to test them

[pradheepap]

The share button shows now with changing to el.style.display = "inline-block";. However the icons doesnt disappear even after opening facebook/linkedin. The image stay still in IE11 but not in chrome or Firefox