I'm experiencing a weird issue which seems to be due to bad pixel rounding when using transforms with a percentage.
Basically, I have a column structure, and the inside of the column has a width equal to 200% of the column itself. I want to then use a transform to toggle the inside of the column to the left, to show the right side of it, by using transform: translateX(-50%)
You can see a simplified example here
The issue is however, that depending on the width of the viewport (try resizing the frame), a 1 pixel whitespace is shown for some of the columns. This happens in Chrome, Safari and Firefox.
Does anyone have any idea of how to fix this?
Edit: I'm aware that I can "fix" the issue by adjusting the transform value, or the width of the items, but that's not really ideal, and I'm hoping there's a proper way to fix it.
It's caused because of transform: translate property miscalculation in browsers. Usually by changing object size, padding or margin by 1 or 2 pixels fixes this issue.
Try using width: calc(200% + 2px); for element with transform property.
transform: translateX(-49%); seems to fix it
Related
I put videos (in ) to the 3 column layout using "column-count 3". And every time when I hit play button on the second or third video on top, I got it jumped to the bottom of the previous column. It happens only in Chrome. In Firefox it's perfect as expected.
I tried to apply all the tips regarding similar questions I've found on StackOverflow, however, none of them works for me (including addition of the translate property to the wrapping container). Could you please help me with that?
Here is my code (Jade):
.column-list.column-list--three
each video in content['pausecast']
+video-panel(video)
mixin video-panel(obj)
.video-panel
.aspect-ratio
iframe(scrolling="no" frameborder="0" src="//www.youtube.com/embed/"+ obj.youtubeId.replace('watch?v=',''))
.aspect-ratio
position relative
width 100%
height 0
padding-bottom 51%
// transform translate3d(0,0,0)
.aspect-ratio iframe
position absolute
width 100%
height 100%
left 0
top 0
.video-panel
border-bottom grey 2px solid
margin-bottom 40px
I definitely cannot go to any fixed heights or widths as I need it to be flexible while resizing + keeping correct aspect ratio. So applied changes should be minimised as possible. Thank you in advance!
Well, the solution that worked for me was to get rid of column-count and use other grid instead. Used Jeet and col(4/12, cycle: 3). That's it. Very weird behaviour of column-count + position absolute.
I've got an element which i'm trying to animate in. I want to do the animation in two steps, first scale and rotate a square in, and then widen the square. I start off by transform: scale(.1) rotateX(360deg); and animate to transform: none, which works well. But as soon as i (in any step) declare a height/width in the keyframes, the rotation stops working. It will still scale as it should, and the height/width properties are applied, but the rotation is skipped entirely.
Here is a Codepen to demonstrate the issue:
http://codepen.io/anon/pen/abDCK
As you see, there's no rotation going on in there, it just simply scales in. Now, scroll down in the CSS and comment out the height/width properties, and you'll see that the rotation now suddenly works.
I've tried different combinations of having/not having height/width declared in the normal selector (not in the keyframe), i've also tried putting the height/width declarations in different steps in the keyframes. No success.
I get the same result in both Firefox in Chrome. Is this the intended behaviour? If so, why? Are there any workarounds?
Something to do with the transforms in the keyframes not being balanced?. You need to add translateX(0deg) to either the 40% keyframe, of 100% keyframe, depending on where you want it.
http://codepen.io/anon/pen/lJKkD
I'd sure love it if somebody could explain the reason - but this is the "solution"
In the screenshots, the form text fields are set to 97% to create a gap between them. It works in all browsers except Firefox -- it seems it stretches all the way to 100%. Anyone pls give me a way to get around this?
Try adding box-sizing: border-box (and the corresponding -moz-box-sizing, -webkit-box-sizing). Otherwise, padding and margin are added to the 97% instead of included in.
I am using FF 13.0.1 on Mac OS and the gap shows correctly.
I applied the following CSS transform to an HTML input box.
-webkit-transform: scale(.5);
When I type text into the input box until it has filled the visible area, the caret continues past the edge of the input and is hidden. Normally the caret and the text would scroll as you type.
The text does eventually start scrolling once the caret has gone the width of the pre-scaled input. The browser seems to be ignoring the scaling when calculating when to scroll the text.
This is only an issue with WebKit browsers (tested with Chrome and iPad). The -moz-transform equivalent works fine in FireFox. The zoom property works fine in webkit, but it isn't nearly smooth enough when scaling on the iPad, so I can't really use it for my project.
You can see an example here: http://jsfiddle.net/4Kv6w/
The first input box is with the -webkit-transform scaling. The second box is with zoom set. The third is normal.
Any help would be greatly appreciated.
EDIT - You can also get the problem without scaling, by using -webkit-transform to move the input box to the left. Here's an example: http://jsfiddle.net/4Kv6w/15/
It seems there is a bug in WebKit when using a CSS transform to move an input box to the left. When you scale down an input box, it essentially moves the right edge to the left, which is how I was experiencing the problem.
The workaround for me was to position the input box way to the left
left: -2000px;
position: absolute;
and then move it back with the CSS transform.
-webkit-transform: matrix(.5, 0, 0, .5, 2000, 0);
You can see an example here: http://jsfiddle.net/4Kv6w/17/
Hey I'm assuming you're trying to animate the change. You will probably have better results using CSS transitions instead of a transform if that's the case. I've created a fiddle for you to see and try it out for yourself.
jsfiddle
Basically, I have a js event listener listening for when the textbox gets focus. Then I change the width in the js and the transition takes care of the animation. Hopefully this takes care of your issue.
I'm trying to fill 100% of the viewport in WebKit (Chrome) using maths.
What I'm doing right now is counting the number of elements and dividing that into 100 and then setting all of the widths for the elements to the resulting percentage, following the basic plan of liquid elements.
The problem is that as the number of elements gets very high, but even after the first few are added, there quickly begins to be an issue where a large amount of space opens up on the right of the elements as the browser fights between percentages, pixels, and rounding.
So my question is, how might you go about taking a variable number of elements and ensuring that the entire viewport is filled?
CSS and Javascript are both fair game, but I would prefer to avoid jQuery unless it has an incredibly simple solution. However, if you can only do it through jQuery, even if it's longer, post it anyway and I can see if I can unravel it.
I should stipulate clearly that this solution must work for a liquid layout. The browser and the containing elements must be able to resize down to about 200px. Any solution that depends on cutting apart a known quantity of pixels won't work for me.
I've published a test site if you're not sure what I mean.
display: table to the rescue!
The problem with my initial solution, of course, is that the elements are floated left and then given explicit widths. The upshot is that as the browser rounds the widths to the nearest pixel, you get jumpiness on the right-hand side of the viewport as you slowly gain and loose total pixels.
The beauty of a table is that the browser already knows that each cell should fill exactly its portion of 100% of the table's width. If the table is 100% as wide as the viewport and you have 4 cells each cell will be 25% of the viewport. Add another and the browser gives each cell as close as it can to 20% of the viewport. It handles all rounding for you so at any given time some of the cells may be a pixel bigger than other ones but the difference is always a pixel and the viewport is still filled perfectly.
The only downside I can see is that you need to have elements that you can put stuff in to be able to use display: table-cell because table cells are non-block level elements and can't be given explicit widths. They need content in order to display. Luckily for me, I can have a ul with li elements filled with a elements and thus I can hang the CSS nicely.
For the list
<ul class="mess">
<li class="mess-part"></li>
<li class="mess-part"></li>
<li class="mess-part"></li>
<li class="mess-part"></li>
</ul>
You need to apply the styles
.mess { display: table; height: 300px; width: 100%; margin: 0; padding: 0; }
.mess-part { display: table-cell; height: 100%; }
And you get a nice, pretty, 100% wide, always filled, liquid-layout spread of elements.
I've published an interactive version of the fix.
Pretty neat, eh?
HT to this question for getting the gears in my head turning.
Maybe because for example 5.4% is rounded to bottom, so if you got 10 elements, which all miss 0.4% you are missing 4% of the page, so if you got 20 elements, your missing 8% and so on. Maybe if you Math.ceil 1 element and Math.floor the next one. You will have less white space on the right side. Because you then only miss 0.2% each 2 elements. But still generating a white space.
What is the best solution is to not use % but us PX. Because those are round to PX instead of % which is a lot more. But then still you can use Math.ceil and Math.floor to fix the floating point numbers and have no white spaces anymore.