display: none !important injected in <img ng-src...>

Question

I am trying to debug my AngularJS app where display:none is injected in tag as shown below:

This is how the img tag should be displayed:

  <img ng-src="{{clientImage}}" style="margin: 0 0 0 5px;" />

This is what I get:

  <img ng-src="{{clientImage}}" style="margin: 0 0 0 5px; display: none !important;" />

Can someone please help me by suggesting how I can trace how the (display: none !important;) is injected? Also any thoughts on what could possibly be injecting this in my img tag?

Notes: - This problem happens only on some browsers but not all browsers, actually I've tried reproducing the bug on same browser version but on two different machines but failed. - I am using Chrome latest version for testing

Farquhar

Are you also using ng-show or ng-hide? Also, which version of AngularJS are you using? – Edna

@ChrisB nope, none on the page and that's what's confusing me more. I am using Angular 1.2.6 – Farquhar

Can you post more of your code please? I'm afraid this is not enough to help you out. – Edna

Answer 1

Turn off ad block.

I had an image named 'Advert.png', spent too much time to realize ad block was blocking it ¬¬.

Saltpeter

Answer 2

This issue comes when adblocker extension is used in browsers when you'll pause you'll be able to see the images and this inline CSS will not be shown.

Bridgid

Answer 3

I had a similar situation. it was because of the ad blocker I had installed on Chrome. My application worked fine on Firefox which didn't have an ad blocker installed. But chrome didn't show an element.

After few hours of Googling I figured out that the id of the element which was not shown by chrome was the issue. The Id I had for the particular element was "post-ad". I changed it to "make-new".

That's it. It started working :)

I think Ad blockers find certain ID s and names of the html pages to decide whether to show it or not.

Hope this helps somebody

Lollygag

Answer 4

I had this happened to me when loading images from src attrib, the inline style "style="display: none !important;" was added for some images.

Try disabling the angular inspector plugins in Chrome. It happened to me in normal mode, but in incognito mode,firefox,opera,mobile everything was ok.

Algorithm

Answer 5

First of all, check in DevTools if it's showing which CSS rule hides that. It should give you file and line. If it's not, try disabling Javascript to see if that helps. Or scan manually the files and look for .hide(), .toggle(), etc. (if jQuery is used).

To debug further, you can try to set the breakpoint on subtree & attributes modifications by selecting the element and in context menu select 'Break on...' (as shown below).

You may also try Visual Event. See also: How to find event listeners on a DOM node?

Neukam

Answer 6

Just to add on, it might not only be Adblock. Any extension that manipulates the browser DOM (e.g. third-party night mode extension) could be the culprit. What I did was to disable all my extensions, then slowly enable them one by one to find the culprit.

Derian