Disappearing form fields on IE? - browser

I have been working on this site for some time and just launched it for a client.
People have actually had trouble beleiving I had done it on WordPress, though I don't see why...
Anyway, I suddenly see that the form fields of one of the forms on the site (Newsletter Registration) disappear while on IE, you get to see them for a second and puff, they're gone. I did check this previously on IE and it worked, I especially used CSS3 PIE to get the rounded effect for the fields on IE...
Link to website: http://www.doritsivan.com (hope this isn't considered promotion, not my intention)
site is based on WordPress and jQuery.

resolved the issue, thank you all. it was a bad case of relative vs. absolute positioning and the fields decided to go away (literaly)
A bunch of debugging with firebug-lite (btw was real to get it to work on my IE, kept on crashing or refusing to load altogether combined with IE popup and security issues) and I understoid that this was the issue, then some pixel fiddling and all was good. rechecked in Chrome, saw that result was exactly the same. job done

Related

Bootstrap 5 + Masonry + Fancybox gallery getting destroyed when uploaded to hosting

I have a problem with using Bootstrap plus Masonry for my layout. Trying it out on my computer, it works perfectly, but when I upload it to GitHub pages or Godaddy hosting, it sometimes gets destroyed like the image I shared. I bought Lightgallery and tried it instead of Fancybox to make the photo gallery, just in case something there was making a problem, but it's the same.
The problem being Masonry or bootstrap, I can't get rid of bootstrap but could use an alternative to Masonry. My client just needs the Pinterest-like layout.
It's very frustrating because it works perfectly until it is live. I tried a lot of things but nothing has worked. Thank you for any idea you could give me, and sorry for my bad English.
Github link: https://m-ribero.github.io/mubles-ballena/galeria.html
edit: Very important detail, it often gets fixed after reloading or resizing the page, but for the first time someone enters there, then it doesn't motivate people to invest more time in the site if it looks that bad.
gallery destroyed
gallery destroyed 2
The problem is with Masonry and not Fancybox (or any other lightbox alternative). Looks like it incorrectly calculates height for the container. Since it works after assets have been cached, I guess that your masonry script does all calculations before your CSS is loaded. Therefore top/bottom padding is not taken into account for calculations.

How to find the origin of some invasive html?

I've been working on the site https://founderspledge.com/ and just noticed that if you go to the main page, and open the Chrome console to view the source, there's an element that I certainly didn't put there:
<div class="pub_300x250 pub_300x250m pub_728x90 text-ad textAd
text_ad text_ads text-ads text-ad-links" style="position: absolute;">.</div>
It also doesn't show up when I run the site's code in localhost, or when I load the page source separately using Chrome's 'View Source' option.
I Googled the div's class list, and the top few hits were from anti-ad blocker software (eg https://github.com/sitexw/FuckAdBlock), which doesn't seem malign, but doesn't explain why it would be on this site.
So
1) How can I get rid of this element?
2) How might it have got there?
3) Does it imply there's a hole in the site's security?
UPDATE: Facebook have acknowledged this as a bug: https://developers.facebook.com/bugs/336662116810282/?hc_location=ufi
I'm so glad to find this issue - have been tearing my hair out to work out the same exact thing! I found it's coming from fbevents.js (https://connect.facebook.net/en_US/fbevents.js) version 2.8.7 - you can clearly see the code that adds the div in. It seems like this is something that has happened very recently? But likewise, I couldn't find anything other than references to anti adblocking scripts which had me concerned!

Nivo Slide Transitions Not Working

My Nivo slide transitions were working in an earlier iteration of this test page. But now I see they aren't working, the slides are no longer functioning as links to other pages like they should, and the captions are appearing about a second before the slide. I have gone over everything with a fine-toothed comb but obviously not fine enough.
The page in question is:
http://americanart.si.edu/index_new_prerelease_jeff2.cfm
Any help would be appreciated. Thanks
I scanned your HTML and Javascript and the only thing I can say is, you have an error on jTweetsAnywhere. It isn't uncommon that if one function, no matter where, gives an error, other stuff stops working too.
So try fixing that error first, or commenting out the jTweetsAnywhere initiation as it isn't recognised ("has no method 'jTweetsAnywhere'")

Mobile Safari fails to scroll to named anchor

I have a big SVG document here, containing a map of all the quests in a certain online game. Each quest node is inside a SVG <a> element, linking to a distinct named anchor in a big HTML document that loads in another tab, containing further details about that particular quest. This works exactly as desired in desktop Safari, and I'd expect it to work just as well in any browser that supports SVG at all since I'm using only the most basic form of linking, but it fails badly on Mobile Safari (iOS 6) - which is my single most important browser target, considering that the game in question is for the iPad. It only scrolls to the correct anchor on the initial load of the HTML page; clicking a different quest in the SVG tab will cause a switch to the HTML tab, and the hash (fragment ID) in the address bar changes, but the page doesn't auto-scroll.
This appears to be a known limitation in Mobile Safari - hash-only changes in the URL apparently used to force a page reload, and that got over-fixed such that nothing gets triggered at all now. The fixes I've found online all seem to be applicable only in cases where the URL change is being generated programatically, from within the same document, rather than static links from a different document.
Further details:
I've tried doing the named anchors in both the old <a name="..."> form, and the newer <h1 id="..."> form. No difference.
I've tried adding an onhashchange handler, to force the scrolling to take place, but the handler isn't being called at all (verified by putting an alert() in it).
I could presumably fix the problem by having each quest's details in a separate HTML file, but that would severely affect usability - with all the details in a single file, you can use your browser's Find feature to search through them all at once. (Also, deploying 1006 files to my web hosting after each update would be a bit of a pain...)
Anybody have an idea for a work-around?

How can I tell when an SVG is finished rendering

I have an SVG which takes a short time to load (about 2-3) seconds. During that time, it looks a little funny. Is there anyway to tell when an SVG is done rendering so I can put up a spinner or hide it or something else?
You can't tell. The restriction is to safeguard user's security. See https://bugzilla.mozilla.org/show_bug.cgi?id=608030 for a more detailed explanation of when this was considered for Firefox but other UAs will come to the same conclusion so you're unlikely to be able to do this in any UA ever.
From the referenced bug...
Doing anything conditionally on the visitedness of a link seems dangerous. I haven't tried this, but suppose the attacker wants to know if the user has been to example.com. An attacker could set the href of a hyperlink to example.com, then navigate to example.com in a hidden iframe. If a MozAfterPaint event fires on the document where the hyperlink lives, you'd know the user hasn't been to www.example.com yet. Otherwise, they have.

Resources