Material-design-lite: MDL Javascript conflict with Twitter widget

[OmniaOmega]

So, I'm having a problem with MDL's javascript breaking my Twitter widget for showing tweets on the sidebar.

When I remove the javascript, it works perfectly fine. I tried changing the position of the script, but nothing resolves the issue, whenever the MDL's javascript finishes loading, the widget is instantly gone.

If you take a look with "inspect element" you can see the widget's iframe is still there below the facebook widget, but its body is empty.
You can take a look at the issue right here. Please don't mind the messy code, I will still make a lot of changes and optimizations.

[sgomes]

Hi @OmniaOmega. After running some tests on our end, it doesn't seem that MDL is causing the issue; commenting out the MDL JS still seems to produce the same behaviour you're describing.

In addition, there seem to be several JS errors on the page, which may be directly related to the issue or not, but may in any case be causing other bits not to run correctly.

I would suggest the following debugging strategy:

• Remove MDL JS
• Analyse remaining JS errors and fix them
• After they're fixed see if the incorrect behaviour persists
• If not, add MDL JS back in

If you do all that and the incorrect behaviour returns when adding in the MDL JS let us know, and we'll look into it!

[OmniaOmega]

Hello @sgomes, thanks for your fast reply and help. That's weird, when I comment out MDL JS the widget shows perfectly fine. I even tried removing ALL the content but the widget, the JS and the mdl-layout div and I still get the issue. The problem also stops when I remove the "mdl-js-layout" class. You can see the above tests here(with the JS) and here(without the JS)

[sgomes]

Both of those links seem to work correctly for me in Chrome 45.

No JS:

With JS:

Perhaps this is a browser-specific issue?

[OmniaOmega]

Really odd, after the JS is loaded, the widget disappears here on Chrome 44, Firefox, mobile Safari and mobile Chrome.

I took a look with inspect element and this is the iframe's content on the "no JS" page:

While on the "with JS" page:

[tleunen]

I can confirm it doesn't work for me with the 1st link (chrome 44 mac), same with chrome 46 but I noticed the widget for a fraction of second and then it disappeared.

[vitkabele]

On Chrome 44 android it shows, and then disappear :/

[eillarra]

Same here. Apparently there is some compatibility problem with mdl-js-layout.
Test: http://codepen.io/eillarra/pen/XbLVXz

[Garbee]

Looking at network requests, the widget things are called for but cancelled. I believe it lies in how the layout JS works. However, not sure if there is anything we can feasibly do to fix it (if we can even locate the exact problem) in 1.x due to BC.

Re-opening as a low-priority research task.

[eillarra]

Thank you for your answer @Garbee .

Menwhile I was able to make it work deferring the load of the widget (view https://dev.twitter.com/web/javascript/creating-widgets#create-timeline). I have done it listening to the mdl-componentupgraded event and it seems to work (the event can be called multiple times, but reacting to the first one seems to be good enough).

Test: http://codepen.io/eillarra/pen/yNdjLV

Could you check if this is a logical approach, or is there any other event we should listen? Thanks.

[eillarra]

@Garbee FYI: the same thing happens for Google DFP Ads: contents appear for a second and then disappear, once the mdl-js-layout file does its magic. I guess the problem is with iframes in general.

If it is affecting ads... maybe you should revise the assigned priority? :)

[Garbee]

Doing initialization within the upgraded event sounds good. I think we may have a custom event once layout is done as well now.

As far as priority, it still stands. There are work-arounds to get things working right. It is just something that needs to be taken into account when developing. The primary problem exists within the JS and most likely is a BC break to fix (getting rid of as much of the layout JS as possible.) So, it is still a low-priority to get figured out all things considered.

[OmniaOmega]

Didn't see this was reopened, thanks for considering it :) I particularly used the removeClass jquery method to solve my problem by removing "mdl-js-layout" when the user is on desktop (since, in my case, it's only really imperative for the drawer to work on mobile view).

[TomGallon]

Hi,
i have the same problem using mdl-js-layout class. (I work with React.js).
To solve the problem I have to remove mdl-js-layout class.

[xiduzo]

I've been having the same issue but have found a little workaround which is working just fine for me.

Use: 'window.onload = function() {}'

Works for the twitter timeline widged, haven't tested it for other iframes

[fgbarone]

Same issue here, removing the "mdl-js-layout" class did the trick. However, heres my question: Is there a class i can add to any element so its ignored by mdl-js processing? Example, any element with 'mdl-ignore' class would be skipped from any mdl css and js. Does this make sense? This functionality exists?

[Garbee]

It isn't that the twitter widget is being messed with by our JS. It is that the container is that is causing the problem. An ignore class won't do anything.

Layout is getting an entire overhaul in 2.x. So I'm going to go ahead and close this out since we most likely won't work on it in the 1.x lifetime. If anyone can track down the issue and submit a backwards compatible PR to fix the issue, feel free to do so.

Otherwise, initializing the twitter widget after the layout is upgraded should do the trick. That can be done by listening to the mdl-componentupgraded event and checking if the target is layout and then do the twitter initialization logic.

[mandarini]

I can confirm, too, that removing the class "mdl-js-layout" from my whole page container div solved the issue of the twitter widget disappearing. Now it appears just fine.

[aaugustin]

I hit the same issue. That was painful to figure out.

In case that helps someone, here's an ES6 implementation of the workaround described above.

    document.body.addEventListener('mdl-componentupgraded', (event) => {

        if (event.target.className.split(' ').indexOf('mdl-js-layout') < 0) {
            return
        }

        // code that loads https://platform.twitter.com/widgets.js goes here

    })

[DougBeney]

Just ran into this issue designing a Wordpress theme. Any idea on how I can fix it?

[Skipants]

It appears to happen at https://github.com/google/material-design-lite/blob/mdl-1.x/src/layout/layout.js#L310

On the next line, when the element is readded to the page, the iframe content is not included with it.

We experienced this when we pulled Turbolinks out of our application. My best guess is that Turbolinks properly cached the iframe content as part of the DOM. So, when the mdl layout js removed and readded the element, the iframe content came with it. Without Turbolinks this isn't the case.

[MartinPaulEve]

Just to elaborate on aaugustin's really helpful comment above with a full example, if you are using jquery, this will solve it for you:

    <script>
        document.body.addEventListener('mdl-componentupgraded', (event) => {

            if (event.target.className.split(' ').indexOf('mdl-js-layout') < 0) {
                return
            }

            // code that loads https://platform.twitter.com/widgets.js goes here
            $.getScript('https://platform.twitter.com/widgets.js')
        })

    </script>

(and remove the original script tag that loads widgets.js)