This problem seems to only happen on Safari (I tested on version 9.0.2).
If I scale my screen down to 565px width, or smaller, refresh the page, the <article>'s I have applied flipInX to flash on the screen and don't appear.
If I remove the margin-bottom: 40px; CSS from the <article> block, then it works.
Is this a bug in Safari?
Example
I had to add this CSS
.main {
-webkit-transform: translateZ(60px);
}
Related
On iOS (15.3) when using a 100vh html/body, the displayed page has a small gap/space above the body tag on first load with real iOS devices (tested on iPhone 8).
After analysing and reducing the content, it turns out that it is independent of the html markup.
Debugged this for quite some time, and finally found a fix.
Add the following code to your css. My guess is that the repaint adjusts the layout correctly. If the translateY doesn't work for you, try another way to trigger a repaint.
/* ------------------------------
iOS FIX: gap/space above body element on first load
-------------------------------- */
#media (max-width: 450px) {
#supports (display: grid) {
body {
animation: pageReflow 0.1s;
}
}
}
#keyframes pageReflow {
from {
transform: translateY(1px);
}
to {
transform: translateY(0px);
}
}
I am using a Wordpress theme (Modern Agency, a subtheme of Total). Images of portfolio items zoom, and an icon appears when you hover on them. This also applies to mobile devices, but this is making scrolling difficult: I find myself dragging my finger up and down the screen multiple times in order to scroll, because my mobile browser (iOS iPhone SE) seems to stick to the portfolio item, as opposed to scrolling.
you can find the website here:
I have tried to customize the stylesheet, but I cannot find a way to disable the zoom on images.
This is what I have tried so far:
.overlay-plus-hover, .overlay-plus-hover:hover, portfolio-entry-media-link, portfolio-entry-media-link:hover, portfolio-entry-img {
transition: none!important;
zoom: 0!important;
}
.wpex-image-hover,.wpex-image-hover:hover, .grow img:hover {
transition: none!important;
zoom: 0!important;
}
I want to disable the transition on mobile devices in order to allow smooth and normal scrolling.
Set a media query for mobile screen sizes and set the transform attribute to none on the .wpex-image-hover.grow:hover img class.
For example:
#media screen and (max-width:480px) {
.wpex-image-hover.grow:hover img {
-ms-transform: none;
-webkit-transform: none;
-o-transform: none;
-moz-transform: none;
transform: none;
}
}
I have a site where I think
Most of my users are using desktop or laptop while they are on my site. The problem is that on some screens its only 1/4 of the screen begin used and rest is just background.
How can I make it auto scale, so it fits the screen's size??
You can use css3 transform:
-webkit-transform: scale(0.5); /* Chrome, Safari 3.1+ */
-moz-transform: scale(0.5); /* Firefox 3.5-15 */
-ms-transform: scale(0.5); /* IE 9 */
-o-transform: scale(0.5); /* Opera 10.50-12.00 */
transform: scale(0.5);
Calculate the scale ratio and apply the rules with this ratio in your script.
Do not forget to set left and top property of the transformized element as the offset ratio of the full width and height:
offsetRatio = (ratio - 1) / 2;
You would need to use CSS "responsive designs". You can find some examples here:
http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756
Basically, you use min-width / max-width, and #media to decide what to show, and how.
If you are not comfortable doing that kinda stuff, then Bootstrap is a good way to accomplish this, with the minimum of effort:
http://getbootstrap.com/
.wrapper {
max-width:1000px;
margin:0 auto;
}
wrapper - is the main container of your site
I've come across a severe problem I can't solve..
I created an accordion element with the jQuery Plugin easyAccordion.js. While I was developing and looked over it in Firefox it worked well - until I openend it in Chrome. There you can see that the rotated text is unclear and certainly blurred, even though it has the same formatting as the un-rotated text at the top. Same for Safari.
I created a jsfiddle that sortof recreates my issue (look at it in Chrome or Safari)
.
..
http://jsfiddle.net/SfKKv/427/
..
.
This is what I'm using to rotate the text:
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
The JSFiddle is not fully working in Firefox, but that's not important here, I have it working on the website I created it in, but even the sortof broken Fiddle in FIrefox shows that it can display the rotated text a lot better.
I've found some hints towards font-smoothing and some 3d Parameters, but none seemed to work for me.
Can anyone help me with this issue?
OK, so after trying out some uncommon things I've found a fix that is not 100% perfect/accurate but good enough for me.
Here's the updated JS Fiddle, again, use it in Chrome or Safari. Use the red Hover box to see the magic in action.
http://jsfiddle.net/SfKKv/627/
All I do is change the -webkit-transform-origin from its default value (50% 50%) to something close enough such as
-webkit-transform-origin: 50% 51%;
When you try out the fiddle, you'll see it moving by that one percent. However, that's still better than the blurred text.
I found this by pure trial and error and I still don't know why the text suddenly turns sharp. If someone can explain me this behavior, let me know!
I believe this has something to do with the way Chrome is rendering the transform. The best way to see what I'm going to talk about is by going to chrome://flags/ and enabling Composited render layer borders. Now, go to the fiddle with a fix that you posted. You'll notice an orange border around several elements on the page. This border is there because it shows these elements are given their own layer when being rendered on the page.
Start tweaking the widths of the dt elements in your <dl class="easy-accordion"> using the Chrome inspector tool. The text will become blurry/clear depending on whether the width is even/odd. What appears to be happening here is the layer is being composited to a half-pixel location which is then being rendered to create the appearance of being "between" two pixels.
This is also the issue with Safari (and WebKit in general).
Check out http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome for more info.
This problem occurs when a background color is not defined for IE versions 8 and 9 and maybe some versions of Chrome (I didn't see this issue in Chrome)
Adding background-color: white; (or any color you want) to your css rotate class solves the problem.
-webkit-transform: rotate(-90deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(-90deg); /* Firefox 3.5-15 */
-ms-transform: rotate(-90deg); /* IE 9 */
-o-transform: rotate(-90deg); /* Opera 10.50-12.00 */
transform: rotate(-90deg);
background-color: white; /* fix blurry text in ie8, 9 */
I had a similar issue, the problem was having perspective in body and the rotated div. It happened only in Safari on mac. Chrome worked fine.
body {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-family: 'Varela Round', sans-serif, Helvetica;
transform-style: preserve-3d;//bad
perspective: 1200px;//bad
-webkit-text-size-adjust: none
}
removing the perspective from body saved me! Indeed I used perspective twice, in body and in another rotated div, which probably caused a hard to kill pixelations, even SVG and text were pixelated.
transform-style: preserve-3d;
perspective: 1200px;
removing the above styles from body saved me.
How can I zoom an HTML element in Firefox and Opera?
The zoom property is working in IE, Google Chrome and Safari, but it’s not working in Firefox and Opera.
Is there any method for adding this property to Firefox and Opera?
Try this code, this’ll work:
-moz-transform: scale(2);
You can refer to this.
Zoom and transform scale are not the same thing. They are applied at different times. Zoom is applied before the rendering happens, transform - after. The result of this is if you take a div with width/height = 100% nested inside of another div, with fixed size, if you apply zoom, everything inside your inner zoom will shrink, or grow, but if you apply transform your entire inner div will shrink (even though width/height is set to 100%, they are not going to be 100% after transformation).
For me this works to counter the difference between zoom and scale transform, adjust for the intended origin desired:
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
Use scale instead! After many researches and tests I have made this plugin to achieve it cross browser:
$.fn.scale = function(x) {
if(!$(this).filter(':visible').length && x!=1)return $(this);
if(!$(this).parent().hasClass('scaleContainer')){
$(this).wrap($('<div class="scaleContainer">').css('position','relative'));
$(this).data({
'originalWidth':$(this).width(),
'originalHeight':$(this).height()});
}
$(this).css({
'transform': 'scale('+x+')',
'-ms-transform': 'scale('+x+')',
'-moz-transform': 'scale('+x+')',
'-webkit-transform': 'scale('+x+')',
'transform-origin': 'right bottom',
'-ms-transform-origin': 'right bottom',
'-moz-transform-origin': 'right bottom',
'-webkit-transform-origin': 'right bottom',
'position': 'absolute',
'bottom': '0',
'right': '0',
});
if(x==1)
$(this).unwrap().css('position','static');else
$(this).parent()
.width($(this).data('originalWidth')*x)
.height($(this).data('originalHeight')*x);
return $(this);
};
usege:
$(selector).scale(0.5);
note:
It will create a wrapper with a class scaleContainer. Take care of that while styling content.
I would change zoom for transform in all cases because, as explained by other answers, they are not equivalent. In my case it was also necessary to apply transform-origin property to place the items where I wanted.
This worked for me in Chome, Safari and Firefox:
transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
zoom: 145%;
-moz-transform: scale(1.45);
use this to be on the safer side
Only correct and W3C compatible answer is: <html> object and rem. transformation doesn't work correctly if you scale down (for example scale(0.5).
Use:
html
{
font-size: 1mm; /* or your favorite unit */
}
and use in your code "rem" unit (including styles for <body>) instead metric units. "%"s without changes. For all backgrounds set background-size. Define font-size for body, that is inherited by other elements.
if any condition occurs that shall fire zoom other than 1.0 change the font-size for tag (via CSS or JS).
for example:
#media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
This makes equivalent of zoom:0.5 without problems in JS with clientX and positioning during drag-drop events.
Don't use "rem" in media queries.
You really doesn't need zoom, but in some cases it can faster method for existing sites.
I've been swearing at this for a while. Zoom is definitely not the solution, it works in chrome, it works partially in IE but moves the entire html div, firefox doesnt do a thing.
My solution that worked for me was using both a scaling and a translation, and also adding the original height and weight and then setting the height and weight of the div itself:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Obviously change these to your own needs. It gave me the same result in all browsers.
It does not work in uniform way in all browsers.
I went to to: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage and added style for zoom and -moz-transform. I ran the same code on firefox, IE and chrome and got 3 different results.
<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" />
</body>
</html>
try this code to zoom the whole page in fireFox
-moz-transform: scale(2);
if I am using this code, the whole page scaled with y and x scroll not properly zoom
so Sorry to say fireFox not working well using "-moz-transform: scale(2);"
**
Simply you can't zoom your page using css in fireFox
**
does this work correctly for you? :
zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
For me this works well with IE10, Chrome, Firefox and Safari:
#MyDiv>*
{
zoom: 50%;
-moz-transform: scale(0.5);
-webkit-transform: scale(1.0);
}
This zooms all content in to 50%.