Rare IE10 bug: CSS animation of background-position fails with multiple backgrounds and percentage - internet-explorer-10

This is a very specific bug - however, I would love for someone to show me a workaround! The bug basically consists in IE10 failing to do CSS animation of background-position when these two conditions are met at the same time:
Having multiple backgrounds
Setting background-position in percent
Here's a demo, compare Chrome with IE10:
http://codepen.io/dalgard/pen/LiyIK

You need to put a percentage sign after the zeros.
It must be so:
#keyframes move {
0% { background-position: 0%, 0%; }
100% { background-position: 0%, 100%; }
}

Related

Ionic 4 Tabs styling

I am trying to give the tabs in a ionic 4 app a gradient background.
I am also trying to set a different color (Gradient) background for each page.
Controlling the style for the tabs in the scss for each page.
The desired affect is as below.
For <shadow-root> which indicates that the browser you're using supports Shadow DOM technique so you can access its elements by only their variables,So try the following
ion-toolbar {
--ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}
ion-tab-bar {
--ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}
If it doesn't work just please detect father -i call it- or its wrapper and put it in advance of it,In another word
wrapper ion-tab-bar {
--ion-background-color: linear-gradient(to right, #... 0%, #... 100%) !important;
}
wrapper refers to the element that wrapping ion-tab-bar
You can set a CSS gradient to the toolbar (top) and tabbar (bottom):
ion-toolbar{
--background: linear-gradient(to right, #color1 0%, #color2 100%);
}
ion-tab-bar{
--background: linear-gradient(to right, #color1 0%, #color2 100%);
}
In case you want to set the gradient for the whole app, place the CSS inside theme > variable.scss
Docs
https://ionicframework.com/docs/api/toolbar
https://ionicframework.com/docs/api/tab-bar

Bootstrap nav justified odd responsive issue

The nav starts out great once you lower the bowser width the nav becomes stacked, this is great. Once you open the window back up the nav items are in two rows. Here's a pic.
This is how it starts out:
http://reggi.myshopify.com/pages/about#
FWIW, I found that forcing a redraw of the .nav-justified element in question helps WebKit understand. Obviously, how you chose to do this is up to you—I opted for the fadeIn(), 'cause when life hands you lemons...
$(window).bind('resize', function(){
var w = $(this).width(),
threshold = 768;
if(w < threshold){
$('.nav-justified').hide().fadeIn();
}
});
Both answers seem to be lacking. The JS solution causes a lot of flicker, and the CSS solution doesn't seem to keep the integrity of the designed tabs. Here's what I came up with.
If you're not using less with your bootstrap styles just replace #screen-sm with 768px
#media (min-width: #screen-sm) {
.nav-tabs.nav-justified > li {
display: block;
float: left;
width: 32.9999%
}
}
The problem is display: table-cell; instruction in the .nav-justified class.
Let's take a look at the bootstrap.css file, I believed that you are using Bootstrap version 3.0, at line 4109.
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: table-cell;
width: 1%;
}
You must change it to :
#media (min-width: 768px) {
.nav-tabs.nav-justified > li {
display: inline-block;
float: left;
margin-left: 100px;
}
}
This will solve your problem.
This is a known bug with Bootstrap.
This has been fixed in Chrome Since 2013, but is still an open bug in WebKit and occurs in Safari.
Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the justified nav example.
— cvrebert
I recommend to not use .nav-justified or be ok with it not working properly in Safari.

Vertically align vertical text in SlickGrid header

I am changing the height of a SlickGrid header and rotating the text in the header with the following CSS:
.slick-column-name {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.slick-header-columns, .slick-header-column {
height: 200px !important;
}
For a better understanding, please take a look at this:
http://jsfiddle.net/2Nvc3/1/
The rotated text in the header is centered and cut off. How can I change the alignment, so that it starts on the bottom (the text should be left-aligned before the -90° rotation)?
The width of one of the columns is different on purpose.
Link to jsFiddle I played around for a while. Basically the problem was that the origin of rotation was the middle of your text/header. Since "Else else SOmeshing Else" is significantly longer than the other column names, it sticks out on both sides. Either way - changing the origin of location to the beginning of the text solves this issue. Then to center um...horizontally(after the rotation) the text we put a margin-left of 40% - at leat that looks good in Chrome, not exactly sure why it's not 50%. To center the text um...vertically(after the rotation) we just add a text-indent of -235px, which is dictated by the height chosen here to fit the text, which is 250px.

Controlling rotation axis with webkit 3d transform

I'm creating a card-flip effect using webkit transformations. I have it working as I like in one section, where I have a DIV that rotates around its center axis giving the look of a card that is flipping over.
I now want to add this same effect to a page transition. I'm using the same CSS and HTML structure, but in this case I'm not getting an effect that rotates around a center axis.
Instead, it looks like the transformation is rotating along the y axis anchored to the left of the object rather than the center (so it looks like a door opening, rather than a card flipping).
I've been reading through the spec's but can't figure out which property controls the rotation axis' position. What do I need to add or change with this to get the flip working?
html structure:
<div id="frontbackwrapper">
<div id="front"></div>
<div id="back"></div>
</div>
and the css (.flip is being added via jQuery to start the effect)
#frontbackwrapper {
position: absolute;
-webkit-perspective: 1000;
-webkit-transition-duration: 1s;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
#frontbackwrapper.flip {
-webkit-transform: rotateY(180deg);
}
#frontbackwrapper.flip #front,
#frontbackwrapper.flip #back {
-webkit-transform: rotateY(180deg);
-webkit-transition: 1s;
}
#front, #back {
position: absolute;
-webkit-backface-visibility: hidden;
}
#back {
-webkit-transform: rotateY(180deg);
}
Try this on your wrapper
-webkit-transform-origin: 50% 0 0;
Though you may or may not have to have its width explicitly set.

How can I Resize & Enlarge an Image (like sprite icons) via CSS 3?

Dear folks.
Imagine a sprite image called icons.png assigned to css class .icons with various 10x10px graphs. Now you want another class which scales up the sprite graphics exactly twice 200% (making them 20x20 pixels on the screen)
How do I achieve this enlargement purely in CSS?
Much appreciated!
.icons, .iconsbig{ /* WORKS FINE */
background-image:url(http://site.org/icons.png);
background-repeat:no-repeat;
vertical-align: middle;
display: block;
height:10px;
}
.iconsbig{ /* make this one twice as big as the original sprite */
background-repeat:no-repeat;
height:20px;
background-size: 20px auto;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
update:
problems with the above code:
It works in IE9, but not in FireFox, by most used browser doesnt know how to resize????
in IE9, the enlargement is smudgy and not neithrest neighbour pixel perfect at all??
It is supported in pretty much everything except for < IE9...
.iconsbig {
-moz-background-size: 20px;
background-size: 20px;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
W3C spec.
Update
Looks like Firefox wants its vendor prefix (-moz) on the property.
You can use the css3 background-size property:
.iconsbig {
background-image:url(http://site.org/icons.png);
background-size: 20px 20px;
}