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.
Related
I am working with videos and sometimes need to show a short video over a stream. But in Chrome the videos start flickering kind of like underlying video is leaking into the one on the top. I tried position: absolute, transform: translateY(-100%) and grid-area: 1/1/2/2 and the same result is produced in each case. It happens even if there is another non-transparent absolute positioned layer in between the two. It only works when an underlying video is hidden completely using visibility: hidden, display: none or other similar technique.
You can check this StackBlitz to see for yourselves.
It works properly in Firefox but not in Chromium based browsers.
EDIT: it seems that this doesn't happen to everyone and is somehow linked to the hardware acceleration feature in Chrome. When I disable hardware acceleration the flickering stops for me also. Looks like a Chromium bug to me.
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.
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!
I am using GWT 2.3 to create a web application. In the web page, I have a button for the submission. I haven't created any css properties for this button. In Google Chrome and Firefox, the size of the button is just the size of the text of the button. However, in IE8, the size is bigger, with some spaces before and after the text of the button. Does any body know how should I do? Since I need to support the internationalization, the texts of the button for different locales are different.
I have tried width:auto; for the button, but it doesn't work.
Thanks in advance!!
Ah, this is an oldie but goodie.
Basically, IE sucks at rendering buttons and you have to add this CSS to fix it:
.my_button {
/* optional */
padding:0 .25em 0 .25em;
/* These two are required */
width:auto;
overflow:visible;
}
See the link above for more information.
In general (not only for GWT), buttons are rendered very differently not only between browsers, but also between operating systems - especially they look completely different on Mac OSX. Take a look at this site, which also has a few nice solutions around the button problem: http://particletree.com/features/rediscovering-the-button-element/
So if you need exact sizes (and maybe a consistent look) across browsers/OS, I think it's better not to use the native button style at all, but to fully customize the style of your buttons. (This is pretty usual on modern web sites, e.g. I don't think there are any native style buttons on stackoverflow.com at all.)
Use Anchor with different background images for it's various states (link, active, hover, visited).
I want to create a search bar like one in this page http://dl.dropbox.com/u/333492/search/form.html
If you load that page with chrome, opera or safari, the search bar looks like it should (tested on mac). However, if you use firefox (tested at least with ff 3.5 and 3.6 on mac), you'll see that one extra pixel gets added on top of the text field, and thus the text field is one pixel lower than the button, which looks ugly.
I tried to remove all possible borders and paddings but the problem persists. I also noticed that it doesn't occur when the search button is not there.
Does someone have any idea on what might be causing this behavior? Or, even better, could someone alter the CSS on that page so that the problem would be fixed?
I finally found a blog post that explains the cause of the problem and proposes an answer that partially fixes the situation. Thanks #anttisykari in Twitter!
http://christophzillgens.com/en/articles/equal-height-input-and-button-elements-in-firefox-and-safari
So the correct answer is to add following lines to the CSS:
input[type="submit"]::-moz-focus-inner {border:0;} /* ff specific stuff, yuck*/
input[type="submit"]:focus {background:#333;} /* change accordingly depending on your button bg color, this fixes the focus problem when using keyboard to move betweenform elements */
However, IE8 still broke my form, so I had to add these to both input elements.
display: block;
position: relative;
float: left;
Now everything seems to be ok.