I am having an issue with a website for our student-organized congress at http://ebspreneurship.de that randomly bugs roughly 1 ever 5 times - sometimes more, sometimes less.
I have three revolution sliders - one is the above-the-fold content (full screen), just under it is the Elements section with another full width revolution slider(RS) and then on the bottom I have this map.
From time to time randomly one of the 2 upper sliders (the last one never bugs) disappears and shows only the background image. I can't trace what's the problem, i spend a few days on that. I notice that if I start many browsers with the website and find one that's bugged, there is an error on Inspect:
Issue at YouTube Video Pause:
(unknown) TypeError: d.getPlayerState is not a function
Still, tried without youtube video and it bugs the same way with only BG image, so that error is for now irrelevant.
I just don't get what's the problem and I tried disabling all plugins, i tried playing with caching methods or disabling it... Nothing changes it...
Any help would be greatly appreciated!
OK, for some reason on random intervals the page loads with my main layer div being with "visibility: hidden;", while the div of the image has "opacity: 0.0001."
So,i went for brute force solution of overriding all div's ids one by one on both sliders.
It worked, since, as seen in the image, the browser loaded with hidden divs and opacity 0.0001, but my override worked and still displayed correctly. Image of how the bug was overridden and displayed correctly
Thank you for the ones that tried to help (I noticed quite a few good souls that as always are found around here)!!
Related
i am having a very weird problem, my CSS is responding very slowly. When i click on a button, it switches the z-index to 500 instead of -999; i can see in console (chrome) that the value has been changed. However it takes 2-3 seconds for it to show up.
When i resize the window i see a white space showing up (the additional space) and it takes a few seconds again until it adapts to the new size.
What can be creating this issue? I am especially confused as simple things as adapting the size to the current screen width (in CSS i used width: 100%) doesnt work quickly.
is there any way which i can do to check what is going on in the browser?
It might help to notice that this error is happening randomly, sometimes it all works flawlessly, sometimes it takes forever.
Im really helpless :(
The problem was a sprite sheet that was too big - apparently resizing and displaying the single elements was taking the additional time.
Using a smaller sprite sheet makes everything work again flawlessly
I can't seem to find an answer to this rather interesting problem. In google chrome, images that have a set width and/or height, either using attributes, inline styling or css styling, refuse to show up on the page on initial load. They only seem to appear after there has been some page activity. Yet, if you let the images load to their natural size they display on page load perfectly fine. The images can be seen as it works in other browsers and when inspecting elements in chrome the image is display in the popup window.
Any know how to fix this?
define what you mean by: 'after some page activity'.
You also mentioned that the it happens when you have set width AND/OR height which leads me to believe in some of your testing your ommiting width OR height so it can be calculated by the browser. if that is the case then yes the image will never look proper and the elements will have no size on initial page load UNTIL the image is downloaded, the browser inspects the image and determines the dimensions missing to create the bounding box.
Edit:
After looking at your online site, my previous comment explains the gist of it but I can see that you're setting a width of 'auto' which requires the browser to load the image first and detect the sizes. Which will cause a delayed 'reflow' in the browser rendering. Set your widths and heights otherwise they will need to calculated by the client browser. And if you have not so good pc it looks sluggish. On my system if i hard refresh with no cache sometimes i get all the thumbs and other times I don't and the delay is very noticeable.
So in short make your images always have a width AND height.
Edit:
You also have some 404 errors that can cause some latency. http://www.webpagetest.org/result/120725_0C_3N6/1/details/
Edit:
I think your only option is to load the bg image first by getting it higher up in the order of resources downloaded so it loads in as fast as possible to be rendered.
One trick might be to load the bg image in a hidden div to preload it right away so the browser downloads it first. And even if you do that you should expect to see some flash of black background while you wait for the high res shot to download and get loaded. Can't set widths and heights on background images anyways. Going further you can speed up the response time maybe by loading all the thumbnails with an AJAX call AFTER page loads so they don't even compete with the big photo shot and start downloading until the dom is fully loaded. You can even put a nice effect in there to maybe fade in the thumbnails loading or something to that effect.
I was playing with adaptative CSS by changing my Google Chrome window size when I noticed that the Twitter Bootstrap page seems to "make google chrome fail" on certain occasions.
Steps to reproduce (from a desktop computer):
Start with a blank Google Chrome tab, full screen
Visit http://twitter.github.com/bootstrap/
Gradually make the window narrower, letting go the mouse every 100 pixels or so.
Keep going until you get the "totally mobile version", at around 400px (The blue "View project on github" button is on top of the white "Download Bootstrap" button, and they are both full-width).
Now make the window thick again, letting the mouse go after every 20 pixels or so.
Chances are that you will get weird behaviour while doing steps 4 or 5 - Chrome gets confused about the sizes, or forgets to draw a vertical region of the page (which is rendered white). I've also managed to get a "phantom side pane" in some rare occasions.
I've tried in two different computers, and I still get the same issues (both using Ubuntu 12)
The thing is, other responsive sites don't have this issue. See for example http://css-tricks.com/ . You can change its size all you want, and Chrome never has any trouble rendering the multiple layouts it has (in fact, it has more layouts than twitter bootstrap).
So I can only conclude that this problem is twitter-bootstrap-specific. Probably related with the way the CSS rules or HTML content is written, or maybe related with the way files are structured.
I'm using twitter bootstrap as a base for one of my sites, and I'd like to solve this issue. Does anyone have any ideas on how to proceed?
If you believe this is bootstrap-specific this should be posted to the Twitter Bootstrap Github Pages instead of SO. However, I've been participating in an issue ticket reg. this which was closed after we pointed out that we're unable to reproduce the error on both Chrome / OS X and Chrome / Win 7 with the same browser build as the OP. This suggest that this is a platform specific chrome-error rather than a problem with the Bootstrap toolkit. With that said, I'd raise a ticket with the chrome team including your build # and OS/Platform setup.
Link to the Github Issue
Dear FB Developer Team,
we have an issue with the FB.Canvas.setAutoResize() function of the app iframe.
The frame extends vertically to the height of the first request, but on subsequent requests to pages with a lower height, the iframe doesn't resize vertically.
While we tried the FB.Canvas.setAutoResize() function, it seems not to work.
Could we somehow solve this issue?
Would be great to receive an answer here.
Best,
Max
This is a known Facebook issue, they're renaming setAutoResize to setAutoGrow for exactly this reason.
When your page shrinks in size you should use FB.Canvas.setSize to lower the height https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/
There have been several bugs reported about how
FB.Canvas.setAutoResize doesn’t set the height of the iframe correctly
in some scenarios. We have been trying to fix this and and have pushed
various fixes to ensure that it works correctly for the case when the
iframe grows in height. We however came to the conclusion that it is
hard for us to do this accurately when the iframe shrinks in height.
As a result we are renaming this function to FB.Canvas.setAutoGrow so
that it accurately reflects its functionality. If your iframe is
shrinking for whatever reason we recommend that you use
FB.Canvas.setSize with a height parameter to set the iframe height
explicitly.
As part of this change, you should be able to use
FB.Canvas.setAutoGrow today. FB.Canvas.setAutoResize will work for the
next 90 days and we will remove support for this method on January
1st, 2012. Here is some sample code to test the grow functionality.
https://developers.facebook.com/blog/post/565/
I am having a problem where the background image that is centered aligned, and repeated vertically, is only breaking on the Latest News page.
I can't seem to find why it would be breaking, especially as it is fine on every other page within the site, and there is no section of the page that differs in sizes etc.
I have used firebug to inspect all aspects of the page but still can't find what is causing the problem, any help would be much appreciated.
It looks like the background image is placed twice on the page. Since you use one that's 2000 x 2000, the cut comes to early on the page, to make it a problem with the top/bottom not fitting.
Another thing is that the top/bottom doesn't fit, so you will get that cut for all pages longer than 2000 px, which is the reason for the second cut on the page. You should instead use a much smaller image, like 10-40 px high, that will fit when repeated. That will give your users a faster page speed. It might also fix the problem, or help you track down the reason.
I think the page is to long for one image, the it repeat.
But, look at you image, it seem that the top of image is'nt correctly connected with the bottom. (Y know what I mean?).