I've been looking at this small issue for a while and I can't seem to fix it. It's an firefox only bug it's fine in IE Chrome etc.
This website I made for a client shows the issue. On the start of the page you see 2 wheel PNG images Three of these images are there, you can switch the z-index by clicking the round circles on the bottom of the image.
As you see the Black colour is slightly more down, I can't seem to wrap my head around the issue since the line height is 0 and the way the black image is positioned is the same as the grey one. They are slightly downsized due to a max-size: 100%, but resizing them to the proper (1000px) doens't seem to help either, (did this locally).
If you open the pictures in photoshop or w/e they're exactly aligned.
Anyone have any idea why it goes wrong on Firefox only?
--> example
Removed the example since it's a website.
Very weird issue indeed. The only thing way I could get it to go away was to absolutely position the wheels. this would require you to set a height on #infographic and take off the margin-top:-100%;. Depending on how you use the #infographic container this solution might not be ideal for you, but at least something to consider to help solve your issue.
It's because of the whitespace between the elements. Unfortunately, some browsers observe it and thus some space is shown although it shouldn't. You can use this workaround:
Generally work with rem instead of em, you need it for this workaround to work easier. First you have to set the font-size of .infographic to zero. Every element inside your .infographic will now become a font-size of zero because you're using em. That's the reason why you should now change to rem, at least for the elements inside .infographic.
Now you're done.
Related
I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.
Ignore padding didn't seem to do anything since no padding existed? I'm really confused here. I do NOT want the red areas. (Please ignore potato colors, I'm just debugging)
Debugging using flash firebug - the dark blue border with the plus in the top left represents the whole of the UITextField inside of my Label component. I was using some other fixes found from around the web regarding how to scale the text properly to fit the container and this is a breaking issue for those fixes.
Does anyone know how to achieve this? I just want to scale my text dynamically when the window is resized and the container resizes as a result.
edit: it's important to note that this label has a scale applied, I can tell that the padding is still there when it's smaller but it's much less noticeable without the scaling
If I have problems like this I debug using FlexSpy.... to inspect the elements, and change properties in real time, very handy for things like this. Maybe that might be of some help...
https://code.google.com/p/fxspy/
Example of FlexSpy running
http://www.mieuxcoder.com/data/2007/12/FlexSpy-1.2/dashboard.html
As far as I Know it isn't possible to get rid of the 2 pixel glutter around the text. For information about the padding arround the text see http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextLineMetrics.html
You may use the .textWidth property to find out the with of your text. The exactly position of the text is dependent of the textfield.antiAliasType and the _textfield.gridFitType methods. With _textfield.gridFitType = flash.text.GridFitType.PIXEL The Flash player tries to render the text to pixels. This causing the 2 pixel glutter to vary between 1-3 pixels.
I have a html layout with a navigation bar at the top and a main content area below it, with a left and a right area. The top bar has a background gradient with a hard stop in it. The main content's right area (sidebar) has a background color that should line up with the gradient stop of of the navigation area, at 75%.
See this for a simplified version of my layout. In Firefox and Safari this renders fine, but Chrome puts the gradient stop a little further than it should. I tried to use pixel values instead of percentages, but the behaviour stayed the same.
Any idea why this is happening, and suggested workarounds? Thanks!
Specially with modern browsers that deals with anti-aliasing in so different ways. What i have done was a js fix, (which wouldn't be good for your code :D) also you would have to add a custom padding for each element. But you'll need to hire a freelancer to do it for you, because it would take a while to complete (browser targeting, getting each element, adding padding for each element...)
if u can post the code it would be simple for more possibility.however i am looking for more solutions.
I am absolutely tearing all of my hair out with this highly frustrating and strange CSS problem I am having.
I am using the Bones boilerplate to make a website, and it has been great, until now...
It uses fluid grid system and I have recently tried to create a simple gallery which I have made into a grid (4 images, each one wrapped in a quarter column, with first/last classes added to the first/last images).
If you hover over the images (especially noticeable on the first three for some reason), you will notice that they change width by a pixel or two for some crazy reason. The images are set to max-width:100%, and I have a feeling this is somehow the culprit, because if you give the images a "fixed" width (example .gallery-icon img {max-width:165px;}, it fixes the issue, but being a fluid grid system, I can't go down that route, as the images stay 165px if resizing the browser, and even if I set 4 different widths depending on media, in between media sizes, the images wouldn't align properly.
If it wasn't for the transition effect problem (if i turn the transition off, the images lower opacity fine, but no animation), it would work as I want it to work :(
Please help guys!
Here is a empty demo site that has the bones boilerplate running and nothing more than the gallery on the page. Let me know if you see the shaking issue.
(I couldn't recreate it on jsfiddle, so I installed it on an old domain I had lying around hehe)
EDIT: I have just noticed that the problem seems to happen to images that are bigger than the div in both width and height. Images 1 + 3 are this and they have the bug, whereas images 2,4 seem to be okay? and images 2+4 have a smaller height than the div..... But even if I set the images a max-height, the problem continues..
EDIT2: Added a quick video to show the problem (latest Firefox and Chrome) http://www.youtube.com/watch?v=uL81hLfMvvw
Thanks to vals for pointing out the GPU aspect... This reminded me of this CSS-Snippet which tends to solve Chrome rendering issues:
-webkit-transform: translateZ(0);
I've applied this to the container (div.post) containing the problematic item (i.icon-) which has a fraction width, problem solved!
Credit: I've got this solution from this answer to fix incorrectly rendered (fixed) elements after navigating to an page anchor.
I would say that it is really a bug in Chrome (I am using 24.0.1312.57 m).
The issue is not really on images 1 + 3, I have seen it on image number 2.
I think that the issue arises when you have the width of the image being a fraction (say 146.71 px). In stationary display, this gets rounded to 146 px. In the transition this gets rounded upwards (more correctly !) to 147 px.
use the following css hint to promote the affected element to a new composite layer (It solved the same exact issue to me):
.<your-css-selector> {
will-change: <css style about to change. example: opacity>;}
This indicate the compositor to isolate the paint process of the element into a new composite layer. When inspecting layers in chrome dev tools you can make sure the element has been promoted, and thence the issue solved. The element will appear in a new layer with the following 'Compositing reasons: has an active accelerated animation or transition. Has a will-change compositing hint.'
Looks like after promoting the element to a new layer this way, the browser is able to render the final state of the transition correctly.
Ivan.
On thins link you can find solution for Mozilla bug.
You need to add 1 CSS rule:
-moz-backface-visibility: hidden;
I suggest using jQuery to handle your opacity rather than using the CSS3 attributes because you are correct in that your max-width is messing, unhappily, with your transitions.
$(".gallery-icon img").hover(function(){
$(this).fadeTo(fast, 0.7);
}, function(){
$(this).fadeTo(fast, 1.0);
});
Using jQuery will fix a lot of these little glitches with transitions and make sure your opacity change is done cross-browser-compatibly (yes, I know that there are lots of tags for transitions for browsers, but there aren't attributes for all browsers.) :) Hope that helps!
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).