Why when I hover mouse on cards image moved ?!
I am trying to fix it and I find when I remove page direction and or remove overflow-y from #center it's fixed but I need them !!
even when I inspect elements in cards and mouse hovering could to see all elements are moved but shown correct ! I guess it's maybe page rendering problem in chrome browser
in fact what is problem and how can I to fix it technically ?
JSFiddle Demo
This issue appears to be a Chrome bug according to this topic:
image moves on hover - chrome opacity issue
and I think you should setting position:relative to inner img solves the problem
Related
On a website I'm working on I got images inside a container that need to zoom on hover. This works smooth BUT..
Whenever an image zooms in or out (when transition is kicking in) the image get's out of the container for the time of the duration.
I've adde overflow:hidden but it doesn't seem to work.
You can find the webpage in action over here: http://avdj.mtdev.be/drukwerk/
There is a known bug in Webkit-based browsers - see #62363.
add opacity: 0.99; to wpb_content_element to workaround this issue.
I have a fixed horizontal menu that works well on firefox but it's presenting a problem in SOME instances of chrome. When the user scrolls down a white block covers the menu.
You can see the problem here: http://brandca.co/cterranum/
We've inspected the elements but it doesn't appear to be anything in the code and looks more like a rendering issue.
We've noticed that when we erase the element's overflow:hidden the problem fixes but we need this property to toggle the menu.
We haven't been able to pinpoint exactly when it happens since it looks it only happens in some computers and even then, a computer in wich the site rendered correctly had the problem happened oduring a presentation on the projection screen.
The fixed element was somehow screwing webkit's rendering, so I turn the element to position: absolute and on the scroll event I update the top value so it looks like its fixed. It's not pretty but it works.
Element has "position: absolute;" and inside it there is .inner-header which has "position: fixed;".
Try moving ".inner-header" outside of ".header".
I have encountered a strange bug using my OpenCart website in Chrome. The product images are not showing up but I see the white area where they should come.
If a product doesn't have an image it's aligned to the left but in this case I can see the white area where the picture normally is.
And here's the crazy part, if I click on inspect element, suddenly the image appears.
Some css code
.product-list .image {
float: left;
margin-right: 10px;
overflow: auto;
}
In the CSS you need to set the width and height attributes.
That is weird. Regardless, things to check:
Z-index: The outer box that surrounds the image might be "above" the image itself. Add z-index to the image with a value of 9999 to check
Position: if it's parent container or god knows what else has a weird position it could be affecting where the child element, in this case an image is appearing.
Disable JS - Javascript might be causing an issue here, try disabling it to check.
Also, when you use chrome dev tools, you are technically "hovering" on the image. And you say it suddenly appears. So I'd take a look at your :hover rules as they apply to images. A lot of sites will use a sprite technique that shows one image in normal state, and then shift the background to a different part of the same image on hover. Your normal state could be empty and the hover then moves the bkgd position to the image you want.
Let me know how this turns out.
More scenarios to replicate this issue
1. Close inspect if not already opened.
2. Resize inspect if already opened.
3. Resize browser window.
Just to follow up on this issue, Mary's answer is the correct one, but for our circumstances it was important not to set a width and height in order to maintain responsiveness. But apparently setting width and height to auto works just as well, even though it makes no difference in appearance.
So, since opening the Web Inspector resizes the page in some cases, you should look into:
resize handlers on JavaScript side that might be causing your images to show up
media queries that satisfy certain width and only show images then on CSS side
Picture element having media queries that
aren‘t covering the width you are viewing this with.
For me this was the Picture element having a gap in its media attribute definitions (<source media=(min-width: 1824px)">).
I have a text input that thinks there is another div element floating over it. When you hover the mouse over, the cursor stays the same. Only a few small parts of the text input can be clicked on.
When you inspect element it shows that it "thinks" you were hovering over the header-resize .
See it here:
http://jsfiddle.net/HxHDK/2/ (Sorry I know a lot of resources are missing, but the problem is still there)
The text input that is bugged is the To: field. This is only happening on google chrome.
I tried adding z-index attributes but did not work.
Any thoughts?
weird behavior, but can be fixed by adding overflow: hidden; to .header rule declaration
Removing the negative top margin on .content solves this indeed weird issue.
Remove the height attribute from header and the problem is gone.
Problem in IE 7: When I mouse over the question mark icon, the tooltip javascript popup is not completely shown in IE 7. Bottom portion is hidden behind the "Auto Assign" block. How can I show the entire tooltip popup?
Here is the jsFiddle link : http://jsfiddle.net/FLyXM/1/
Just apply z-index:1 to Pin field li where you place the tooltip.
Thats it!
z-index only works on positioned elements. Give the element position:relative or something. Also, please use the enter key more when coding css, your's is very hard to read.
https://developer.mozilla.org/en/CSS/z-index