Consider the following example : https://codepen.io/anon/pen/OOrMLm
Each white block can be clicked, which reveals a small red popup in which I need the users to make some choices.
On Firefox, everything seems to work fine (if I use display:inline-block; on the white elements), but on Chrome and Safari the behaviors are kinda weird.
The two bugs are the following :
displaying the red popups in position:absolute that are located on the right hand side seems to affect the flow in the columns (the blue blocks expand), while it does not in Firefox (which is what I want)
clicking inside a red popup that is overlapping onto the 2nd blue div will not be caught as a click inside the popup (it seems like the popup is "below" the 2nd blue div somehow).
I played around with forcing the z-index and transform: translateZ() but with no luck. It seems like display: flow-root; helps a bit on Chrome, but I could not get it to work fully.
Any idea on how to fix this in Chrome and Safari ?
Related
In this fiddle Chrome and Firefox display the expanding tree significantly differently. This causes a problem in Chrome. When one expands the tree by moving the cursor down the right side of a visible node, the node that one is moving to jumps to the left. Depending on where the cursor is, it's possible to lose the entire tree, forcing one to start at the top again. Firefox simply expands to the right, and this problem doesn't occur.
Any idea how to get Chrome to display like Firefox?
Thanks.
P.S. IE is like Firefox. Chrome is the odd man out.
Recently I encountered a rendering issue in Webkit which I suspect to be a bug with the Webkit engine. But I am not confident enough to say so. So I would like ask here and see what you think.
It'd be a bit difficult for me to describe the case in plain text, so I prepared a snippet here:
http://jsfiddle.net/2eQXa/1/
First you can see a yellow background with red border. This is not a background of the <body> tag but a <div> with id "backdrop" which has 100% width and height. By default it links to the "backdrop-no-problem" class. Also there is a horizontal list with some images. The list is surrounded by a green border. Inside the list there are some Wikipedia logos wrapped with a dotted red border.
I tested the page with the following 3 devices:
1. Chrome 21 on Windows 7
2. Mobile safari on the first generation iPad (running iOS4, I'll call it iPad1)
3. Mobile safari on the "new" iPad (running iOS5, I'll call it iPad3)
Try clicking "right" or "left" to scroll the list. Pretty good.
To reproduce the my problem, first click on "Issue #1". This will change the backdrop div from "position:absolute" to "position:fixed". Then click "Issue #2". This will add "-webkit-backface-visibility: hidden;" to the element (The reason for adding this style is to ensure smooth animation on the iPad).
Now click "left/right" to scroll the list. You should see a strange behavior in all three browsers:
The green div is scrolling properly and smoothly, but not its child elements. The child elements simply "out-sync" with the position of the scrolling parent. The movement not only looks laggy, it sometimes even stuck. And the child elements will stop at a wrong position when the scrolling animation finishes. You have to move your mouse over the picture (or tap on it in a tablet) to trigger an update to have the element re-drawn at the right place. Even Chrome shows this weirdness makes me feel that it is a Webkit issue.
Things gone worse in iPad3. In iPad3 you don't need to add "-webkit-backface-visibility: hidden;" (Issue #2) to see this weird behavior. Just add "position:fixed" (Issue #1) will do. The strange thing is that this doesn't happen when you view the snippet in jsFiddle. In case you are interested I have put the source in a single file at pastebin:
http://pastebin.com/i4ARX4mD
When writing this question I saw quite a number of questions regarding backface visibility. I've checked some but none of them matches my problem.
Ideas or suggestions are welcome. Thanks!
(Post updated to fix many typos)
I'm having a cross-browser compatibility issue with Chrome vs FF.
Here is the web inspected from Chrome, you'll see that the box for the DIV #content is overlapping the box for the H3.
In FF, the #content DIV does not overlap:
The issue is the difference in overlap is causing the background behind the Doctors' heads (the light blue canvas texture) which is relatively positioned DIV to be off. In Chrome is positioned well, in FF the green "view all button" is beyond the background.
Link to the site: http://terminalcitymarketing.com/drafts/highgate/
It looks to me as if they are both in the same place, just chrome is showing you the region differently in the inspector to FF. I don't think its an issue at all.
I have a feeling that if you fix some of your Validation Errors, the problem might fix itself. Of the ones listed, the immediate red-flags that I noticed were that you have a bunch of these errors:
Error: Duplicate ID
Check #wrapper, #mainBox, etc.
on line 72 of the css, i took out the
p{
margin-bottom:12px;
}
and it fixed the positioning of the green view all button. You will then have to reapply the margins more specifically to the elements you want them on
I'm having an issue with my navigation, the first list item appears to have a huge gap on the right.
I have a list of links inside an UL each have their own class so I could set a background icon to them. The first link has a background to give it the rounded effect.
I used relative to push to left so it would have that rounded effect for the hover and active states on the homepage and hover for when i'm on other pages.
Now it all works fine in new browsers apart from IE7 and probably older versions.
I've put it on JSFiddle to make it easier to view.
http://jsfiddle.net/datastream/Gta3h/2/
and http://eminemforum.net/navtest/nav2.html
Thanks
Live Demo (edit)
I got rid of <div id="navHold">.
I removed right: 40px from #topNav2 .home-icon.
I changed the width of #Navigation-Holder from 750px to 830px to make it appear the same width it was before I changed anything.
I've tested that this looks consistent in: IE7, IE8, Firefox, Chrome.
My site http://bit.ly/aokA4I has a search bar on the top right.
You can see it on IE7, FF, Chrome, Safari -- but not on IE8. It gets chopped off.
BTW if you happen to see it on IE8 just refresh the page and it will chop.
If I run IE8 on compatibility mode the search bar becomes visible.
Any ideas how to solve this?
Thanks!!
It's because IE8 is interpreting the nature of its parent container: header_widget_1. The sizing or formatting of this element is causing the <li> element to be clipped prematurely. If you have Google Chrome, you can right click the sidebar element you're asking about and choose "Inspect Element". This will show you what the elements are doing.
Edit: You also have a sizable horizontal scrollbar in IE7.
Edit 2:
You might try altering the height of your #header element to be the height you want. Since height is not expressed in the sidebar class, this may also be contributing to the problem.