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
Related
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)!!
why is div in IE 7 display difference from other browser ?
in IE 7 Look like
________________
|________________|
But in Chrome and other browser Look like
____________________________________________________________________________
How to hack ie to display look like other browser ?
<div style=" border: 1px solid #ddd; width : 200 px; height : 1px;"></div>
Having a website look the same on different browsers has been an ongoing issue for the web designers all over the world. The reason is simple - the visualization of a website depends on many different variables such as:
The visitor's OS (operating system)
The visitor's display resolution
How the browser interprets the page
The visitor's OS
If your website uses submit buttons, radio buttons, check boxes and edit fields, all of them will be visualized depending on the visitor's OS and its style. For example, a submit button can look like a gray rectangle on your Windows Classic theme, and like an oval if you use the XP style. As a workaround, you can create custom buttons for your website.
The code of an ordinary submit button looks like this:
You can replace it with the following code in order to specify the submit button image:
Submit
Similar changes can be made for the other parts of your website's interface. Consulting a professional web designer or searching the Internet will be necessary to solve all of the possible issues.
Visitor's display resolution
Display resolution is affecting quite a lot the way a website is displayed. For example, if you create your pages at 1024x768 they will not fit into the screen of a visitor that has set his/her resolution to 800x600.
In order to fix this, you should not use static dimensions for your website, i.e. instead of setting width = 1024px you can use width = 100%. This will not fix all issues but at least will make the page fit into the screen.
How the browser interprets the page or website's cross-browser compatibility
Web browsers do not render pages pixel by pixel. They read the entire code and produce an output depending on your code. There are, however, differences in the code interpretation. Therefore you should check the way your website looks on different browsers and operating systems. You can use the following online tool in order see how your pages look on different browsers:
http://browsershots.org
A good website should look the same and all its features should work in any browser.
Unfortunately, there is no easy solution for that. You should check the specificities of each browser that fails to display your website correctly and make the necessary adjustments to your code. A skilled website developer should be familiar with most common browser compatibility issues and should be able to assist you. Such compatibility issues may occur not only in different browsers but because of an old browser version which does not support completely the latest standards.
In conclusion, you should test your websites on as many different browsers and operating systems as possible. If you spot any errors, you should try searching on the Internet for a specific solution for the issue or contact a skilled developer who may assist you in resolving it.
I'm working on a new website design and I'm having an issue with it. The site is http://www.paulietheboss.com/ - I'm only really focused on the homepage right now till I get this problem sorted out.
I'm trying to make the theme fully responsive, however if you resize the browser window and it gets between ~1027px and ~1065px wide a scrollbar appears at the bottom and part of the right hand side of the site gets cut off - try it and you'll see what I mean - any ideas?
(The width values I listed are in chrome, but the same seems to happen in other browsers at slightly different sizes)
A similar issue happens viewing on an ipad3 in landscape, but I believe it is related somehow.
I am having issues getting my Instagram images to display properly. I have tried all types of tricks and changes but cannot get it to look consistent on both desktop and mobile. It looks perfect when at full window size and across all browsers (except mobile), but when I change the size of the browser viewing window it gets all weird.
Here is my issue:
I need all the horizontal Instagram images to be responsive, meaning when I do change the size of the browser window they will adjust to the dimensions that are appropriate to view them properly. I want them to always stay in a row of 5 images across...
Here is a link to the work in progress:
http://www.jaygiroux.com/wordpress/
I have tried modifying the instapress.css to the best of my abilities but now I'm just stuck. I tried using percentages instead of pixels in some places but it's still not working...
What im reading online is that until version 3 nivo slider is not responsive, so you might want to update the library.
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
Also i noticed that you're calling the tag twice (the first one is between the ie class compatibility code) so watch out for that too.
I need help determining what the cause of a serious visual glitch is with one of my production websites. It is only happening with Safari - Chrome and all other browsers are fine.
http://www.philanthropicdirectory.org/search
This is a Drupal 6.x website, running the following simultaneously:
jQuery 1.3.2 (Drupal base/default)
jQuery 1.4.4 (This is used here and there by overriding the jQuery namespace to '$js' for certain advanced operations 1.3.2 can't handle)
jQuery UI 1.7.3
Thickbox 1.8.2.19 (I've slightly modified this .js)
TO REPRODUCE:
Click link (visit the page): http://www.philanthropicdirectory.org/search
Click twice (once to center) on any of the 5 'coverflow' panels to trigger Thickbox content
Once TB content loads, resize the browser window horizontally left or right
Notice the odd background-image and background-color offsetting
Switch between any of the 5 'tab' icons in the upper right of the modal system
At any point, use Web Inspector to uncheck and then recheck any CSS property, anywhere
Notice how this instantly clears/fixes all visual glitches
Resize the browser window again or tab between the other tabs, and notice the glitches return.
If you notice the same things I am, it'd be great to get your machine config and Safari version.
Before
After resizing
After tabbing
The images say it all, and as far as I could test, I can only reproduce this problem in the following setup, with Safari:
MacPro, 6-core Xeon (2010)
OS X 10.6.8
2 monitors: 1x 23" Cinema Display (old silver one) + 1x 27" Apple Cinema Display
ATI Radeon HD 5770 (Mac version w/01.00.436 Driver)
Safari 5.1+
I've tested other machines and other machines with earlier versions of Safari (4.x), and the problems are simply not present.
Is there anything you think I can test to figure out why this is happening?
PS: Only using one monitor at a time produces the same problems.
SOLUTION!
I noticed this happening with another website we've built - a website with nothing in common with the Drupal one with the problem here, save for the fact that this new one also has a Flash (SWF) file in the body, and I was applying a CSS property to an element with a negative z-index value.
It was happening on this new website because the container for the object in the HTML was set to
z-index: -1;
in order for elements positioned to overlap the object could be clicked on (otherwise, links on top of the object could not be interacted with).
I was able to permanently fix it by instead setting any elements positioned on top of the object
z-index: 1; /* or anything > 0 */
Given that solution, I hunted down any and all "z-index: -1" CSS on the Drupal website and sure enough there was an element within the Thickbox container that was shown on every tab - the big green "SEARCH" input button. It was styled that way because of visual needs (something to do with the fake inner-drop-shadow on the button).
I disabled the entire z-index property for this element, and lo-and-behold, the funkiness permanently disappeared on the Drupal website.
Hurray! It was surely providence that I came across the same issue more acutely on a different website.
Now I'm not sure the exact bug in Safari that is behind this without intense testing, but all I do know is that an object on the page + any element near it set to z-index: -1 equals total meltdown (on a Mac running Safari 5.x).
I checked in Safari 5.1 (7534.50) on an HP Xeon running Windows 7. I don't see any glitches.
That's weird. Sounds like a race condition of some sort. Maybe there is a bug in your ATI driver? Since it fixes itself when you re-render it, perhaps you could introduce some delay somewhere which might give it more time to render properly?