I'm trying to create a 2d grid in HTML and CSS where resizing the window reflows elements to the appropriate row. The effect can be achieved by just floating fixed-width divs to the left, but I want to add a dynamic margin to minimize white space on the right of the screen.
My problem is when adding dynamic margins (b/t the divs) via javascript, the divs will appear to flicker (i.e. switch back an forth rapidly between rows) when resizing the browser window (only happens when width is decreased).
The bug manifests itself in webkit (chrome and safari), but not in Firefox. If it's just a webkit bug, is there a way to get around it?
An example can be seen on jsfiddle or a regular webpage:
http://jsfiddle.net/RAZHA/3/
http://alec.thewinograds.com/float_flicker_example.html
Thanks!
$(box).css("margin-left", (marginSide * .5) - MARGIN_REDUCTION);
it seems to me to be a JS issue; reduce only margin margin not both.
http://jsfiddle.net/RAZHA/3/
Related
I've made rock paper scrissor game using html,css and js.When window is resized to small, some left portion of the page disappears .Using horizontal scrollbar i can scroll to right but not left.
I've checked for absolute positionings and negative margin but none worked.
What should i try ?
I expect to get entire page without any portion getting clipped off.
Hard to answer this without the code, but I would use devtools first to see what margins are being applied. You can look at the box model for each element in your dom and see what is being applied. Also, how small are you resizing? Do you have any explicit widths? If you are sizing down to 200px, but you have a div that is 250px, it clearly is going to have overflow. Devtools can also help with analyzing different devices too. Use the tool to set a size and see how your page responds, you can change the width of elements in the devtools to see if it removes the overflow.
I have a problem doing pixel-perfect center icon inside colored block with round edges. Icon changes left-right offset on browser window resize.
Open for example Chrome or Safari with https://github.com/facebook/react
And try to resize width of browser window very slowly (by pixel).
You will see a little changes (1-2px) in offset between icons and it's titles in buttons (Watch, Star, Fork).
The same happens with icon inside colored block with round edges.
Why it happens? And how to prevent it?
p.s. Initially, I ran into this problem developing a electron app, but it appears everywhere.
p.p.s. May be there is any webkit option to change rendering method, that will prevent such trembling on resize?
Problem solves by adding
transform: translate3d(0px,0px, 0px);
to icon styles
but it slows rendering on page scrolling :(
I'm developing a simple opacity slider for my site and I've encountered a weird rendering bug (?) that happens only in Firefox (Chrome and Opera handle it perfectly).
The problem is while slides change each other, there's horizontal line appearing over them:
Obviously it has something to do with arrows which switch images. If I set display: none to them, there's no line appearing.
Arrows are simple > < in spans, and they have text-shadow. If I remove text-shadow from them, the line gets thinner:
Spans with arrows are positioned absolutely inside divs which taking half of slide container each. These divs are inside other div, which is sibling to slides and has z-index:1 to be over them. If I set right/left position for spans so they will just a little superpose image, or if I make divs thinner (for example, 40% instead of 50%) for the same purpose, the line disappears:
It may seem like it's related to spans' width, but setting max-width and display: block doesn't help too.
How can I get rid of this weird line? Maybe there's CSS hacks for it? You can check slider yourself here. Thanks!
So I've removed spans and instead put arrows just inside divs. I've vertically centered them using :before CSS hack from this answer. No weird lines and works like charm, though I've had to add some nbsp's before and after arrows so they would not be just on the edges of slide container. Well, a bit dirty but it's fine for now. Works even in IE10 and I don't need more.
If anyone has a better idea for a title, I'm all ears.
Here's a JSFiddle that demonstrates the problem: http://jsfiddle.net/VXsAg/
In a nutshell, I have an element with fixed height and stretch-to-contents width. If the contents are higher than the fixed height, there should be a vertical scrollbar. There should also be ONLY vertical scrollbar, because horizontally it can stretch as much as is needed anyway. Unfortunately I cannot get it to work in a cross-browser compatible way. Here's what I get (the top box is for reference, the bottom box demonstrates the problem):
In IE8, IE9 and Opera 11.60 it appears like this (very good):
In IE7, Chrome 17 and Firefoxes 3 & 10 it appears like this (disaster):
I can see why it happens (width is calculated before scrollbars are taken into account), but how can I work around it?
Apparently nobody knows. Well, I solved it via javascript. Basically I did the autosizing part myself. I calculated the size of the contents; calculated the size of the scrollbar; and set the width explicitly.
I'm having trouble with the browser compatible div positioning. I'm doing an image map with buttons on top of it in separate div's. These div's tend to move around in firefox, in safari and chrome everything is okay.
They tend to move down a bit.
Changing the doctype seems to influence the rendering in firefox. But none of the doctype's seem to work.
Check the Algiers button on this link in firefox and you'll see what I mean.
http://kareldc.com/grimonprez/index_js_animatie_clicks.html
Any help = very much appreciated!
The <body> element is still using the browser's default margin and padding values (8px), which may account for the gap you're seeing.
Another thing to note is that while your images have explicit heights, the <div>s surrounding them are actually taller than those images.
For instance, the image you reference is 37px tall. It's surrounded by the #button_8_algiers div.
In Firefox, that element is 43px high, which is 6 pixels taller than the image -- the exact number of pixel whitespace you have.
In chrome, the element is 41px high, which is 4 pixels taller than the image. Chrome is rendering it OK for some reason, though.