Reputation: 7212
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
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
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
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
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
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).
You may also try Visual Event. See also: How to find event listeners on a DOM node?
Upvotes: 0
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