I am making a connect4 game that works fine on desktop but on chrome mobile the pseudoelements doesn't appear which is the circles in the game.
.circle::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
}
:is(.circle.red, .circle.blue)::before {
transition: 0.3s transform ease-in;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
}
.circle.red::before {
background: #ff0000;
}
.circle.blue::before {
background: #0000ff;
}
Where is the problem ?
The problem was in :is operator is not supported in chrome mobile
Related
I'm working on a website for cookies. I created a keyframe to rotate the cookies and adjust the postioning. On google chrome, everything looks as expected, but in Safari the #main-cookie starts in the wrong position (somewhere in the middle of the screen), but ends in the correct position - it snaps into place at the end of the rotating. I am not sure if I am missing something but am open to suggestions to fix this issue.
Here is the CSS for the key frames in variables:
#keyframes rotate-cookie-desktop {
from {
transform-origin: 50% 50%;
-webkit-transform: translate(-50%, -5%) rotate(0deg); /* Chrome, Safari, Opera */
-moz-transform: translate(-50%, -5%) rotate(0deg);
-ms-transform: translate(-50%, -5%) rotate(0deg);
-o-transform: translate(-50%, -5%) rotate(0deg);
transform: translate(-50%, -5%) rotate(0deg); /* Standard syntax */
overflow: hidden;
}
to {
transform-origin: 50% 50%;
-webkit-transform: translate(-50%, -5%) rotate(360deg); /* Chrome, Safari, Opera */
-moz-transform: translate(-50%, -5%) rotate(360deg);
-ms-transform: translate(-50%, -5%) rotate(360deg);
-o-transform: translate(-50%, -5%) rotate(360deg);
transform: translate(-50%, -5%) rotate(360deg); /* Standard syntax */
overflow: hidden;
}
}
#media only screen and (max-width: 480px) {
html {
width: 100%;
}
#keyframes rotate-cookie-mobile {
from {
transform-origin: 50% 50%;
-webkit-transform: translate(-82%,-12%) rotate(0deg); /* Chrome, Safari, Opera */
-moz-transform: translate(-82%,-12%) rotate(0deg);
-ms-transform: translate(-82%,-12%) rotate(0deg);
-o-transform: translate(-82%,-12%) rotate(0deg);
transform: translate(-82%,-12%) rotate(0deg); /* Standard syntax */
overflow: hidden;
}
to {
transform-origin: 50% 50%;
-webkit-transform: translate(-82%,-12%) rotate(360deg); /* Chrome, Safari, Opera */
-moz-transform: translate(-82%,-12%) rotate(360deg);
-ms-transform: translate(-82%,-12%) rotate(360deg);
-o-transform: translate(-82%,-12%) rotate(360deg);
transform: translate(-82%,-12%) rotate(360deg); /* Standard syntax */
overflow: hidden;
}
}
}
Here is the relevant CSS calling the keyframe on #main-cookie:
.overlay {
background-color: var(--clr-modal-backdrop);
z-index: var(--zindex-modal-backdrop);
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
.offClick {
position: fixed;
width: 100%;
height: 100%;
}
.modalContainer {
display: block;
top: 5%;
left: 5%;
position: fixed;
width: 90%;
height: 90%;
background-color: var(--clr-off-white);
z-index: var(--zindex-modal);
overflow: hidden;
border-radius: 12px;
& #main-cookie {
display: flex;
z-index: var(--zindex-popover);
overflow: hidden;
position: absolute;
height: 100vh;
transform: translate(-50%,-5%);
-webkit-transform: translate(-50%,-5%);
animation: rotate-cookie-desktop 15s;
animation-fill-mode: forwards;
}
}
#media only screen and (max-width: 480px) {
.modalContainer {
height: 90%;
& #main-cookie {
display: block;
z-index: var(--zindex-popover);
overflow: hidden;
position: absolute;
height: 100vh;
transform: translate(-82%,-12%);
-webkit-transform: translate(-82%,-12%);
animation: rotate-cookie-mobile 15s;
}
}
}
Any help is appreciated!
I have tried resetting the top and right for the browser. That showed inconsistent results. I also tried switching the order of rotate and translate in the keyframe - that showed no difference.
I have some codes now but it does not feel 'natural' like HTML5's video element's loader.
How can I finetune this CSS3 loader to be more similar to the video element's one?
Right now I have 2 elements rotating constantly with a short delay in between.
I just don't see if I need to raise this delay, or need some more sophisticated animation with bezier:
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
}
.loader {
color: #555555;
margin: 15px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 0.4em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before,
.loader:after {
position: absolute;
content: '';
}
.loader:before {
width: 5.2em;
height: 10.4em;
background: black;
border-radius: 10.4em 0 0 10.4em;
top: -0.2em;
left: -0.2em;
-webkit-transform-origin: 5.2em 5.2em;
transform-origin: 5.2em 5.2em;
-webkit-animation: load 1.2s infinite ease 0.2s;
animation: load 1.2s infinite ease 0.2s;
transition-timing-function: cubic-bezier(1.0, 0.5, 1.0, 0.1);
}
.loader:after {
width: 5.2em;
height: 10.4em;
background: black;
border-radius: 0 10.4em 10.4em 0;
top: -0.2em;
left: 5.0em;
-webkit-transform-origin: 0.0em 5.2em;
transform-origin: 0.0em 5.2em;
-webkit-animation: load 1.2s infinite ease;
animation: load 1.2s infinite ease;
transition-timing-function: cubic-bezier(0.1, 1.0, 0.5, 1.0);
}
#-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader .label {
font-size: 16px;
position: absolute;
top: 110%;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body bgcolor=black>
<h2>How To Create A Loader</h2>
<div class="loader"><div class="label">Loading...</div></div>
</body>
</html>
For example here is a simple spinner which I'm looking for (it also changes its color, but it is out of this question):
Material design also uses this as loader and here is a JS + CSS solution but I need something without SVG (pure CSS3): https://www.jqueryscript.net/demo/Material-Design-Style-Loading-Spinner-with-jQuery-CSS3/
In case anyone is seeking for this, I have found a very nice solution:
https://materializecss.com/preloader.html.
It's a pure CSS solution, no SVG and no JS is needed.
I created an X button using CSS only. It displays fine in all browsers besides on ie11. In ie11 the button stacks over a border but when it's clicked it moves slightly down to the correct place it's suppose to be. I have no clue on how to fix this and have tried a bunch of different ways. This code is scss btw.
button {
width: 50px;
height: 50px;
right: 15px;
top: 15px;
padding: 0;
position: absolute;
border: none;
background-color: transparent;
&:hover { cursor: pointer; }
&:before, &:after {
content: '';
width: 100%;
height: 2px;
background-color: blue;
display: block;
position: absolute;
}
&:before {
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
&:after {
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
transform: rotateZ(-45deg);
}
}
}
I would use a media query plus a position property plus an !important (not recommended but we want to be absolutely sure) to forbid the button from moving anywhere if the browser is ie10 or higher. The code I would use would be something like this:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /*media query for ie10+*/
button {
position:absolute !important;
}
}
Failing that, there is another question here which also mentions jumping elements but that was from ie8. The issue was solved by using display:block.
What version of IE11 are you using? The code runs well in my IE11 which version is 11.116.18362.0. I made a simple demo:
button {
width: 50px;
height: 50px;
right: 15px;
top: 15px;
padding: 0;
position: absolute;
border: none;
background-color: transparent; }
button:hover {
cursor: pointer; }
button:before, button:after {
content: '';
width: 100%;
height: 2px;
background-color: blue;
display: block;
position: absolute; }
button:before {
-webkit-transform: rotateZ(45deg);
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg); }
button:after {
-webkit-transform: rotateZ(-45deg);
-moz-transform: rotateZ(-45deg);
-ms-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); }
<link rel="stylesheet" type="text/css" href="demo-style.css">
<button></button>
I use your scss to compile it down to css file and then import it into the page. The 'X' won't move in IE11. If you're using older version of IE11, I suggest that you could move to the latest version and try it again.
I've been trying to make an icon spin on page load using css3 animations. The icon spins in Chrome and IE 9+ but it is not working on firefox version 44. I would appreciate your help.Here is my code:
<div class="pageloading-mask"><div>
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite ease-in-out;
-moz-animation: spin 2s infinite ease-in-out;
animation: spin 2s infinite ease-in-out;
color: #038A3B;
top: 200px !important;
transform: translateY(-50%) !important;
}
#keyframes spin {
from { transform: scale(1) rotate(0deg); }
to { transform: scale(1) rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
Just remove this line transform: translateY(-50%) !important; and it will work like here:
.pageloading-mask div {
background: none !important;
width: 20px;
height: 20px;
margin: 50px auto;
position: relative !important;
background: none !important;
}
.pageloading-mask div:before {
content: "LOADING..";
color: #038A3B;
position: absolute;
top: 350px !important;
transform: translateY(-50%) !important;
}
.pageloading-mask div:after {
content: "\e602";
font-family: AlbourneGlyph;
font-size: 80px;
position: absolute;
-webkit-animation: spin 2s infinite 0s ease-in-out;
-moz-animation: spin 2s infinite 0s ease-in-out;
animation: spin 2s infinite 0s ease-in-out;
color: #038A3B;
top: 200px !important;
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="pageloading-mask">
<div></div>
</div>
see here :jsfiddle
inside the -moz-keyframes you wrote -webkit-transform instead you need to use -moz-transform
and don't use !important on the transform: translateY(-50%)
code :
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
also. be sure you write html correctly :
<div class="pageloading-mask">
<div></div>
</div>
tested in mozzila firefox . let me know if it works
In this page following CSS to draw 12 point burst, how can I put some text inside it (in current form it does not show text inside text, I test z-index without success)?
How can I draw a 12 burst border in it most clean manner?
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
All you need is to nest another element inside the burst container:
<div id="burst-12"><span>I am the text</span></div>
Then you can style it the way you want:
#burst-12 span {
display:block;
position:absolute;
z-index:2;
}
You'll find a very basic example here.