CODEWITHSUNDEEP
angularjsgoogle-chrome-devtools
MChan
MChan

Reputation: 7212

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

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

Upvotes: 7

Views: 5797

Answers (6)

Malthus Oh
Malthus Oh

Reputation: 1

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.

Upvotes: 0

user12557717
user12557717

Reputation: 51

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.

Upvotes: 4

vigamage
vigamage

Reputation: 2125

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

Upvotes: 3

A stupid guy
A stupid guy

Reputation: 211

Turn off ad block.

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

Upvotes: 21

kenorb
kenorb

Reputation: 166929

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).

Break on: Subtree & attributes modifications or node removal

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

Upvotes: 0

Nick Damouras
Nick Damouras

Reputation: 21

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.

Upvotes: 2

Related Questions