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?
Related
A very weird thing happened a couple of hours ago. I am developing a new site - which is already live Utopia Africa - using laravel & bootstrap. I am normally using Firefox on my mac to view the local site. Suddenly everything started to be rendered "big" by Firefox as for a cellphone but with text extremely big (see image below) and all logos/images at full size (although img-fluid). The size of text and images do not change when resizing the window. I tried everything like clearing cache, rebooting... However, the same local site is perfectly rendered on chrome, opera & safari. And once again, the same source file (I compared them) is rendered well on firefox when on the live server (as the above link shows). I am pulling my hair off with this one... any idea?
Have you zoomed Firefox by accident? Press CTRL + 0 to set the viewport zoom to 100% instead of 300% it is now on.
Firefox zoom option:
https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages
Today I've learnt something new, that <select> element rendered completely different on a desktop and mobile browser. The problem that I haven't use it before and almost all stuff I've done, is by using Bootstrap's elements.
So my question is actually 2 questions are following:
Why <select> tag rendered differently on mobile chrome and desktop chrome when I debugging in mobile mode? Is it intended behaviour or I can consider it as bug? For example open following page http://www.w3schools.com/tags/tag_select.asp from desktop browser in dev mobile mode and on a hardware device, you will see the difference.
What is the best approach to achieve consistency across various devices? Can I be sure that in all new mobile devices <select> will be rendered "in a mobile way", or just implement my own select element based on Bootstrap modal combined with List group as I've done here: http://codepen.io/anatoly314/pen/EPBmrM?editors=1010 ?
DevTools Device Mode does not emulate mobile-specific UA handling of form elements. This is actually very tricky to do since those things are compiled for that platform build.
The best thing to do is know there will be a difference. In the case of select elements it really doesn't matter much. Since the mobile UX is a full screen scroll selector of the choices.
The absolute best thing, as always, is use Device Mode as a guideline. It is not absolute nor can it be. You will always need to do on-device testing to verify everything works as expected. DM simply gets you 85-90% of the way there without issue.
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 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
I've created a rather simple Flex application using Flex Builder 4, which connects to a webcam on the user's PC. To do so, Flash is presenting the user with the infamous privacy warning.
Now, the problem is that user can't click on the panel, as it seems unresponsive to any user interaction.
Some more details:
Firefox 3.6.12 on Mac/OSX, Snow Leopard.
Adobe Flash Plugin 10.1.85.3 / 10.1 r85
The Flex app is working fine in its own window/tab but the problem shows up as soon as the html page with the Flex app is embedded into the iframe of another page.
If I artificially put an Alert box before connecting the camera, the user is able to interact with the Flex application but as soon as the Privacy panel is shown, the Flex app stops interacting.
The app works fine under Chrome and Safari but I have not tried this under Windows.
I've read that there are problems with CSS positioning so I removed any CSS style impacting the Flex app.
Before I change my strategy and get rid of the iframe (which will cost me quite some effort) I'd be happy to know whether others have experienced the same problem and if there are workarounds.
Thanks.
I had the same issue for weeks now. I found what may be the problem. It has something to do with the css alignment. try to remove the text-align:center; from the div flash is in and it will work again. Somehow the active areas from the security panel don´t shift with the display image…
In my application, this problem is apparently caused by an element containing the flash having the css margin: 0 auto. This leads to the left edge of the flash object sometimes being reported as a decimal, e.g. $('.flash').position().left --> 450.5px. Whenever it's not a whole number, the security panel failed to react to clicks.
The fix described in https://bugs.adobe.com/jira/browse/FP-4183 and linked to by Christiano almost works. However, it failed whenever the browser was resized to be so small that the left margin disappeared.
Here's what fixed the issue for me:
function registerMozillaFlashFix() {
if ($.browser.mozilla) {
$(window).resize(function() {
$(".flash").each(function(ii, e) {
var $e = $(e);
$e.css('margin-left', $e.position().left % 1 === 0 ? '0' : '0.5px');
});
});
}
}
Then just call window.resize() once your flash has been set up.