I have successfully implemented the CSS to scale across browsers as previously shown (with add-ons and edits) in this thread:
How can I scale the content of an iframe?
But now I find that it does not work in Safari on an iPad. Can anyone shed some light here? The working code I have is at http://gfx.com/example
Here is the current CSS...
#framewrap { width: 238px; height: 303px; padding: 0; overflow: hidden; }
#myframe { width: 990px; height: 1260px; overflow: hidden; z-index:10; }
#myframe {
-ms-zoom: 0.24;
-moz-transform: scale(0.24);
-moz-transform-origin: 0 0;
-o-transform: scale(0.24);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.24);
-webkit-transform-origin: 0 0;
}
The goal is to have the loaded webpage (iframe source) scale to the iframe.
Avoid Using Iframes on Mobile Safari because there is a rendering bug that apple/web-kit has yet to fix.
Related
I am having a peculiar issue with a page in which an animated background item at times overlaps over the element in front.
I have seen this happen only on the Samsung Internet Browser (v13.2.1.70) so far.
I can't replicate it on chrome for example (I didn't test many other browsers either).
Here's a codepen of the issue: https://codepen.io/antizio/pen/qBqbqVX.
HTML
<div id="scene">
<div id="bg"></div>
<div id="card"></div>
</div>
CSS
#scene {
width: 500px;
height: 500px;
background: lightgreen;
}
#bg {
position: absolute;
left: 100px;
top: 260px;
width: 100px;
height: 100px;
background: red;
z-index: 10;
}
#card {
position: absolute;
width: 300px;
height: 300px;
background: radial-gradient(rgba(140, 193, 63, 0.5) 0%, #138849 70%);
transform: scale3d(0,0,1);
animation: scaleup infinite ease-in 2s;
}
#keyframes scaleup {
from {
transform: scale3d(0, 0, 1);
}
to {
transform: scale3d(1,1,1);
}
}
I have seen it sometimes behaving correctly sometimes overlapping, all just by changing the scrolling position of the page :/
I managed to fix the issue by adding an "empty" transform to the foreground element, however that's not ideal. I based this on remnants of browser behaviors from a long time ago.
Does anybody have any insight on this? Why does this happen? Is there a better way to fix this?
I am running the following code snippet:
#mydiv{
width: 2px;
height: 2px;
border-radius: 50%;
display: inline-block;
margin: 100px;
background-color: red;
animation: wave 1s infinite;
}
#keyframes wave{
0%{
transform: scale(1, 1);
}
100%{
transform: scale(100, 100);
}
}
<div id="mydiv"></div>
Normally this animation runs fine. The problem occurs when I zoom in and out my screen. After zooming in and then zooming out I see that border-radius starts getting incorrectly shown. I have taken two screenshots of how it gets:
The first image is taken on Microsoft Edge. It happened when I zoomed in and out using CTRL+ and CTRL-. Doing the same thing in Chrome also resulted in something exactly like this. The second one happened when I zoomed in and out using Chrome dev tools. I have also experienced this in the android version of Chrome (that's where I noticed it first). It didn't happen in Firefox.
I don't know why it happens, but my guess is, zooming in and out suddenly affects the calculation of CSS transform.
What is the actual reason of this bug? Is there a fix for it?
Try this
#mydiv{
width: 200px;
height: 200px;
border-radius: 50%;
display: inline-block;
margin: 100px;
background-color: red;
animation: wave 1s infinite;
}
#keyframes wave{
0%{
transform: scale(0);
}
100%{
transform: scale(1);
}
}
<div id="mydiv"></div>
I made a CSS3 animation, it works well in Firefox and Chrome, but it behaves differently in IE11 and Edge.
I couldn't fix the issue because it's hard to debug CSS3 Animation using IE Developer Tools. This issue also occurs on Edge (But i think my Edge version is outdated so please try to reproduce this issue only in IE11. The fix will probably work on both).
Here is how i want the animation to look (Works on Chrome/Firefox):
Here is how it animates differently on IE11:
Code:
HTML:
<div class="block"></div>
<span>click</span>
CSS:
span {
width: 50px;
height: 50px;
background: red;
font-size: 50px;
}
.block {
position: fixed;
height: 0%;
bottom: 0;
width: 100%;
top: auto;
display: block;
background-color: #0B0B0B;
z-index: 99999;
animation-fill-mode: both;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
.animate-up {
animation-name: overlayEffectUp;
}
#keyframes overlayEffectUp {
0% {
bottom: 0;
top: auto;
height: 0%;
}
35%,
65% {
height: 100%;
}
100% {
bottom: auto;
top: 0;
height: 0%;
}
}
JavaScript (With jQuery):
$('span').on('click', function() {
$('.block').addClass('animate-up')
})
Here is the Demo link: https://jsfiddle.net/zoq9h7xp/3/
Please, any help would be appreciated!
Edge seems to be buggy with position: fixed. Supposedly the switch between top: 0 and top: auto (and same story with the bottom property) causes this behaviour.
If you must maintain the fixed position, you can try to animate with the transform property. Change your rulesets as follow:
#keyframes overlayEffectUp {
0% {
transform: translateY(100%); // totally offscreen
}
35%,
65% {
transform: translateY(0%); // totally on screen from bottom
}
100% {
transform: translateY(-100%); // totally off screen again to top
}
}
.block {
position: fixed;
top:0;
bottom:0;
transform: translateY(100%);
width: 100%;
background-color: #0B0B0B;
z-index: 99999;
animation-fill-mode: both;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
Hope this helps.
Cheers, Jeroen
I'm having an issue with my nav bar in internet explorer and I don't know how to solve it and have been trying to for hours. Below is the code that I think is the problem.
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
Internet Explorer does not support CSS variables.
You might be able to use a polyfill to work around the limitation.
I have been working in a pop up. It's centered vertically and horizontally in the main div. I have used the following code:
CSS
#pop-up {
background-color: #FFF;
display: none;
height: auto;
left: 50%;
margin: 0 auto;
position: fixed;
top: 50%;
width: 420px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
But everytime I hover the DIV, it get pixelated. I have been reading about it and it's a Google Chrome's bug. I have tried different solutions but it didn't help me out. So, can you help me to fix it?