http://trulyamped.com/test/art.html
For some weird reason whenever i toggle one of the options such as web/ios/print the animation does a weird glitch and the animation skips.
but when i delete the codes *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
from my style it works properly but only to find that my hover animation is clipped.
So what i am asking is how do i get the animation glitch to stop? (just click on one of the filters on the site to see the glitch)
for comparisons look at http://designwoop.com/labs/filtered-portfolio/ and you can see how smooth it looks
i am really nit picky and the way the animation is not smooth bothers me.
it's easy since you already know the reason that couses glitch.
quicksand is a plug-in so it's not smart enough to calculate css.
And also it is better not to apply box-sizing css for practice.
I would suggest take the
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
out and calculate width and padding by yourself for figcaption
Related
I am making a embed-able widget for the customers so that they can embed my service on their own website.
I am having one issue that if customer is using bootstrap v3.3.7 (tested only this version so far) on their website so one of its css style:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
is destroying my app alignment.
My widget app without Bootstrap:
My widget app with Bootstrap:
I have tried a lot of things like I applied internal and inline css styles to override it but nothing worked.
I tried this:
#widgetParent {
font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
line-height: normal;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
Here I applied property value "content-box" because its fixing the issue on Google Chrome Dev Tool but its working in inline or internal css.
I even tried to adjust my app the Bootstrap styles in a way that it will look better but its not possible because obviously not everybody use Bootstrap so my app alignment will crash on without Bootstrap websites.
So, Is there any way I can detect whether the website has Bootstrap or not so I can give styles according to it or any way to prevent this * selector from applying to my widget app ? If anybody have any solution to it please let me know.
Note:
I have tested this on bootstrap v3.3.7 CDN which is included in the app like this :
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
Thank You
I put this in my internal css I mean the html style tag and the problem resolved.
#widgetParent div {
font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
line-height: normal;
-webkit-box-sizing: content-box!important;
-moz-box-sizing: content-box!important;
box-sizing: content-box!important;
}
Thanks everyone for help.
I have a simple input with some styles.
input {
display: block;
width: 100%;
padding: 4px 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
<input type="email" id="email" name="email" placeholder="Email">
The code works just fine with Firefox. However, in Chrome, when the input is focused it get shrunk a little bit (smaller than in normal state).
I've tried to apply border-box sizing on this input but the problem still retains. How should I fixed that?
Use the :focus pseudo class.
input:focus {
outline: none;
}
Like this: JSFiddle.
It works fine for me in Chrome and Firefox as well. Also worth to consider of using normalize.css (or something similar), to avoid (or fix) the browsers default css attriibute settings.
i have a problem that i couldnt find a solution for it. I use bootstrap on my website and it uses
*, *:before, *:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
for all buttons.
Now i just installed arrowchat scrip and i have a problem with this rule from above, it ruins my css from arrowchat. I tryed to add
-webkit-box-sizing:content-box !important;
to my arrowchat class but still it doesnt affect with anything. Can someone give me a solution for this?
-webkit-box-sizing: content-box; /* Android ≤ 2.3, iOS ≤ 4 */
-moz-box-sizing: content-box; /* Firefox 1+ */
box-sizing: content-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
You need all of them to cover all the browsers
I have A LOT of input text boxes on a site I am creating with very specific width's in pixels.
The width of the boxes are all the same in Safari and Firefox but in Chrome, they are off by a few pixels fewer. Does anyone know why this happens or what would be causing this?
EDIT: I use Eric Meyer's Reset CSS v2.0 as well
EDIT #2: It looks like Tamil Selvan's box-sizing did the trick. It just really messed up all my heights of other div boxes that I've made. Looks like I'm just going to have to spend some time to fix that. Thanks!!
input {
padding:3px;
height:8px;
outline: 0;
border:0;
border-radius:3px;
}
It looks like Tamil Selvan's box-sizing did some of the trick.
I added the following to really fix some of the problems I was having with the box's not being the same:
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
However, I have found that letter-spacing is also an issue. Safari and chrome's letter spacing is off slightly too and I am trying to figure out how to fix this as well.
Letter Spacing Example
font-family: 'Arial Narrow', Arial, sans-serif;
font-size:13px;
I am trying to add padding to a box via:
.p-box-header{
border: 1px solid orange;
float: left;
width: $p-box-width;
padding: 0px 0px 0xp 20px;
}
and it looks like this:
The 'Food' header is adding 20px to it's width. This didn't happen in box below. Why is this happening and how can I prevent?
thx
Note : You wrote "0xp" and not "0px". If this doesn't solved your problem, then read the following.
You should take a look at a CSS3 property called box-sizing.
This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
More infos here : http://css-tricks.com/box-sizing/ and it's available since IE8 (CanIUse - Box-sizing)