I have a weird rendering glitch on a webpage in google chrome. I reproduced it under Mac Chrome, and Chrome under a parrallels virtual machine in windows.
It's supposed to be a simple draggable div. But, when you drag it around, it looks like this: http://imgur.com/VdY3Tv2
The situation is pretty unusual; it's a container div with a css transform matrix, containing an iframe, with a draggable div.
I created a demo. Just drag the div around: https://www.dropbox.com/s/cjq39w82mghuze2/bug.7z?dl=0
Any idea what causes this?
[edit]
I still have no idea. But: updating the transform matrix of the parent element (in my case, I was using fit.js, and call watching.trigger()) forces a redraw. So, that might be a useful workaround that helps people. :)
I found an actual fix that is not stupid and half-working like my earlier attempt.
iframe {
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
To clarify, to any iframe in which you have this happening, apply the above CSS.
No more glitches. Stupid, I have no idea why it worked, but I just tried random things, and then this worked. I'm guessing it enables some kind of different rendering flow that avoids this bug, whatever it is.
Related
I have a very strange behaviour only on Chrome. I want to style checkboxes on a filter layer. An example you can find on http://jsfiddle.net/2wpe0unu/
The filter criteria are dynamic and based on a REST call. It works perfect, but with some CSS3-features I'm using the labels cannot be clicked. To demonstrate this I've created a fiddle on http://jsfiddle.net/3oL5tmfp/1/ Open the Layer and try to click the checkbox.
Some thoughts to solve this problem:
label without position: relative; – it works, but the styled checkboxes are lost in space
ul without CSS-columns – it works, but I have no columns ;(
layer without transform: translate3d(0,0,0) – it works, but I do not have any hardware acceleration
The problem occurs only on Chrome (Mac & Windows) and Mobile Chrome (Android & iOS). It works like expected on IE10+, Safari, Mobile Safari and Firefox.
For me I've solved this by avoid transform on the layer (solution 3), but I would like to understand this strange behaviour.
May it's a bug of chrome engine? Any suggestions are welcome.
Ciao
Ralf
on your ul add z-index: 2; and position: relative (to make the z-index work) seems to solve the problem in your fiddle.
Also would recommend adding a clearfix to your content is-open since you say the checkbox list will populate dynamically.
I'm using webkit-perspective to animate slide transitions in css. It works well on all major browsers except safari.
The second slide has a flicker on the text. I found solutions here that includes -webkit-backface-visibility: hidden;
on the parent element. But it didn't work for me. The site is: http://www.venicedev.com I think this is happening because of my canvas element on the back of the text. But I can't found any turnaround for this.
Anyone can help me with this?
adding z-index:1; seems to have helped
So I have a video playing in the background of a splash page, it is running on a loop with no available controls and I have text and an image sitting on top of it. I set it up as a with z-index: -100.
This works perfectly in Safari and Firefox, but in Chrome and Opera when the page loads everything on top of the video disappears. As soon as I resize the window everything re-appears, but when I refresh it has the same problem.
I'm not really sure what to try at this point or if this is a common problem. Any help would be great, we're trying to launch the site tomorrow.
Edit: Here's a link to the site. I was hoping this was a common enough problem that there would be a well known fix. http://jessemacdesign.com/upload/splash.html
For me, it's working in Chrome and Opera no problem (so check you don't need an update!). However, I wouldn't recommend using negative z-index as there's not really any point in doing so. Try this for your z-index and see if it works:
video#bgvid {
z-index: 1;
}
#bgimg {
z-index: 1;
}
I would also remove the z-index from #main as I don't feel it's needed.
Failing all of the above, try structuring your page differently so your video is in it's own div. I can't recreate your issue myself though, it's working in Chrome and Opera for me.
Original: Any chance of a link? It would be hard for me to help you without viewing the code directly!
The full scope of my specific issue is likely too deep to include in a question here. Instead I am looking for clues.
The nature of the problem has to do with overflow: hidden. In Internet Explorer 11 it is working sometimes and at other times not. I have an element that is larger than the body and I have set the body element to overflow: hidden. Sometimes the page loads and works exactly as expected, but in about 60% of my tests the browser just ignores this property. If I look in the inspector the property and value are present, yet are not having any affect on the rendering of the page.
I have tried using a container element instead of the body, but the same thing happens. opening the inspector panel while scrolled to the top of the page will sometimes fix the issue. Any ideas?
There is a lot going on with this layout which is why there is no fiddle. Everything else works fine in IE. There are no errors in any browser and the layout works perfectly in all other browsers I have tested (Chrome, Safari, Firefox, Opera and IE 11).
Are you using a display properly on that div or element? If you have display: inline then try to change to display:block.
I am not sure why this worked but I just positioned the body fixed. That seems to work.
I´m testing my newest design and there is one specific issue I cannot figure out.
It appears that a specifik element is triggering an opacity change when I hover the element.
According to my tests this only occurs in Firefox and IE. It doesn´t happen in Chrome.
My best guess is that this is happening due to some sort of browser specific CSS but I have not been able to locate any CSS on any of the elements that is causing this opacity change.
One of the problems is also that I normally use Chrome F12 when I need to spot source code issues and hover CSS effects are hard for me to locate in Firefox and Chrome.
Here is a link to my test-site where you can see the problem in Firefox and IE when you for instance open the accordeon tab "Vælg Stof Indvendig" and hover the images:
http://www.geniusdesign.dk/Demoer/Tailoredsuits/design-dit-eget-jakkesaet/design-selv-jakkesaet-detaljer
You have css that says the following: .product-field-display:hover { opacity: 0.5; }
Because the .product-field-display element is a span wrapping div's, Chrome is basically making it a non-element (height/width of 0 and no placement on the page). But Firefox is still reacting to it (I guess IE is too).
I can't see your site, but have you used a reset at the top of your CSS? This usually solves problems like this. Some browsers s=do weird things by default!