I have a website that recently started to have an issue with a bunch of divs containing links and images are flashing at the top of the website momentarily while the page loads.
See: pelicancases.com
It's strange because I see those images already rendered even before the images flash. Also, this is a new occurrence.
Could this possibly be due to CSS animation or CloudFlare caching/optimization?
Any recommendations on how to fix this issue would be greatly appreciated.
If I use WebPageTest to inspect your page I see some browser related issues.
When testing with Chrome there are three 404s
https://www.webpagetest.org/result/160921_2N_1GQS/
http://www.pelicancases.com/android-chrome-192x192.png
http://www.pelicancases.com/favicon-96x96.png
http://www.pelicancases.com/favicon-194x194.png
If I test with IE 11 I don't see any 404s
https://www.webpagetest.org/result/160921_TE_1H77/
To troubleshoot I would start by disabling CloudFlare caching
(Domain > Overview > Development Mode > Enabled)
Then fix the 404s, they may not be the cause of the problem but worth eliminating first.
If you still have the flashing, try and figure out if it's browser related.
Good luck!
Related
Having a really hard time figuring this out.
http://www.gemcode.co.uk/
The site works fine on firefox but is completely broken on chrome.
Havent tested IE as of yet.
I recently bought a basic level membership of cloudflare but I have turned on development mode and purged cache from wordpress CMS panel and the cloudflare settings. This is the most recent change I have made. Before this it was working perfectly.
Any help would be greatly appreciated.
I am clueless.
** Added this into the style.css **
.page-container {
padding-top: 0px;!important
}
It comes up fine on my browser now?
how about you guys?
There is something gone wrong with your JS as I can reproduce the issue on my Chrome - (Canary Version 52).
I think you need to roll back to your previous iteration and then have a look at what changed from when it was working fine to now.
In my experience with WP using page builders, the JS calculations for margin and padding can break very easily. Which seems to be exactly whats gone wrong with your site:
class="et-animated-content"
Is the main culprit.
Most often these issues come from a minification process gone wrong.
Also, you should investigate how your JS/CSS files are served given there is about 2 second delay before any styling what so ever kicks in, which is far too much.
OK here is my issue - ever so often 10 or 20 loads of the page, from various menu options Google Chrome stutters on the Bootstrap Navbar. What happens is that the navbar drops into the live page and it appears that Chrome threw a break into the Bootstrap Navbar. At first i thought it might be the iframe that i have in script, but even after removing that it still shows up. Again this is VERY intermittent, but enough to bug some Chrome users. I have scoured the dev tools to find out what is causing it to no avail.
you can view the code at www.murphyschphouse.com/contactus.html and also the resform.html - although not as much on that page (maybe ever 50 loads or so) - and they are pretty much identical in code. I.E. handles it just fine - usually it is the other way around - go figure ... Any help to solve this would be greatly appreciated. I have written a JavaScript script that reloads the page and this seems to solve it, but I think I would rather have a CSS fix rather than a JavaScript hack. HELP
We have a WordPress website which loads sufficiently in every browser I've tried, except for IE. For some reason in IE, it seems to freeze the browser for a few seconds every single time the page is loaded, doubly so if it has to load a page with an iframe of another page. The user has to wait awhile before they can interact with anything on the page.
Here's the site.
Someone suggested we could use WP Supercache to solve the issue, but I've had problems with this plugin in the past and am reluctant to rely on it, especially since this seems to be only a problem in IE.
What is the best way I can troubleshoot this issue? How do I find out which scripts in the header, or footer, etc. is causing it? Is there a quick way to do so, or do I just need to start eliminating variables within the theme?
I'd don't quite understand why but in IE9 style.css is being pushed right down the page load order - see request #35 http://www.webpagetest.org/result/130327_Y9_f1d5796658d8475b68e2e537644173f1/1/details/
As a browser won't render until it's downloaded the applicable CSS this blocks rendering.
Chrome on the other hand prioritises downloads so that resources that can block rendering are downloaded ahead of images.
Here's a side-by-side video of the two loading experiences.
(If you want help looking at this further my contact details are in my profile)
Thanks to this thread I just found, the answer appears to be fancybox: Fancybox causing slow load times in IE?
Specifically, the IE-specific filters in the CSS file for fancybox. I removed those filter styles, and it loads fine now.
Sorry, I don't seem to be able to give just a comment. Anyway, in Opera 12.14 it works fine. And in Explorer (8) it works just as well, no errors in the console. Just my .1 cent.
Recently I had some issues with Flash in IE, involving a SWF which is something like a gallery.
In Firefox its loads perfectly, but in IE it doesn't work properly sometimes. The first time it is loaded its works fine but when I refresh all the images are blank. The image data came from XML.
I wish to get some tips regarding the browsers and Flash / SWF behavior in each.
Thanks in advance.
I once faced a similar problem. IE first displays image properly. Upon refresh it didn't display the image. The problem was with the IE security settings on scripting languages. If the script fails to load properly on first time, IE blacklists the script and hence blocks it from running again. When u reset the security settings it will work. But you should still get into the bottomline of the issue and fix it.
Thanks,
Nirmal
I've noticed a strange behavior in two different sites when using IE8.
The first site is in the site that I maintain xebra.com.
The second site is google analytics.
The behavior is that when an address is typed directly into the address bar of IE8, both sites display correctly,
But when one of the sites has already been loaded, and you press the refresh button or F5 key, the layout gets all screwed up:
See screenshots here: here
Something is causing IE8 to render in 'quirks mode' which causes the breakage.
You can duplicate this by browsing to your site in IE8 and selecting Tools > Developer Tools > Document Mode > Quirks Mode.
Make sure your document is always being served in standards mode.
EDIT My original answer had 'compatability mode' where it should have read 'quirks mode' - the two are different.
JS.Companion was what was causing this odd bug, and not IE8. Phew!
http://www.my-debugbar.com/wiki/CompanionJS/HomePage
I spent the whole morning trying to figure out what was going on, I removed companion.js and bingo my site is perfect! thanks for this.
That's really strange. I don't have the problem on my computer with Companion.JS installed and http://www.xebra.com/ web page (under Vista SP1).
I would be happyto correct the Companion.JS bug that generates this problem if you can provide more information about the problem.