I have an image on my website, this is its source:
<p>
<img src="images/image.jpg" style="width: 50%;" />
</p>
In Chrome and Firefox, the image displays correctly (same way as it is uploaded on server). However, in Edge, the image is rotated 90 degrees. When i download the image, it is always rotated correctly, even if I download it from Edge.
I have never encountered this issue before. Any solutions?
That's an incredibly odd behavior. Though this is not a good practice at all, in case of urgency I would address Edge specifically while looking for a permanent solution.
As per an answer here by #paulo-roberto-rosa, Edge is the only one that supports the selector -ms-ime-align. Therefore, you can try rotating it back to its position using a support query:
#supports (-ms-ime-align: auto) {
.img {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
Related
I was trying to scale my input box which accepts a date.
However, on Edge, it also scales the dropdown asking for the date. I don't want this. It works perfectly on Chrome.
A sample code:
#normal {
position: absolute;
left: 100px;
top: 50px;
}
#scaled {
position: absolute;
left: 100px;
top: 100px;
}
#scaled:hover {
transform: scale(2);
}
<!doctype html>
<input type="date" id="normal" />
<input type="date" id="scaled" />
I was thinking of targetting it explicitly and telling it not to scale.
So, how do we target it?
Or, is there any better way to tell it not to scale the dropdown on Edge?
To target edge you can use -ms-ime-align support. edge is only Microsoft browser that support this property. add this part to your css file beside the others.
#supports (-ms-ime-align: auto) {
#scaled {
transform: scale(1) !important;
}
}
remember that you have to write this css in a separate file, if you use inline in html page, you could get an error.
I try to test your code sample with MS Edge (EdgeHtml) browser and I can produce the issue on my side.
It looks like there is an issue with the Edge browser and we can't fix it using code.
As per the information from MDN docs, Scale can create accessibility issues.
Scaling/zooming animations are problematic for accessibility, as they
are a common trigger for certain types of migraine. If you need to
include such animations on your website, you should provide a control
to allow users to turn off animations, preferrably site-wide.
Also, consider making use of the prefers-reduced-motion media feature
— use it to write a media query that will turn off animations if the
user has reduced animation specified in their system preferences.
Reference:
scale() Accessibility concerns
As suggested in the docs, you can give control to users to turn off animations. As a workaround user can use the MS Edge chromium-browser. Which is working fine.
I have a jpg image that was taken vertically and saved that way. It appears as it should (vertically-oriented) in Windows Explorer:
I've got this HTML/Spacebars to display it in my Meteor app:
<template name="nfnoscarsdonut">
<p>Here's a picture of NFN Oscar's microscopic Donut, which we had to eat because he pulled a "George 'No Show' Jones" again</p>
<img src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>
</template>
...but it displays in "landscape" (rotated 90 degrees to the left), as you can see here:
What do I need to do to get the image to straighten up and display right (vertically)?
There seems to be no orientation property for the img tag
I'm not familiar with Meteor and this is just a guess. Maybe the JPEG file has its EXIF rotation property set which Windows Explorer is reading and using to "soft-rotate" the image for display and which the browser when referencing the image is simply ignoring (or vice-versa).
The simplest option might be to rotate the image using CSS as described here.
If you open the image in an image editor you can see if the image is rotated or not and if not then rotate it and see if that has any effect on its display on the web page.
Or you could view the EXIF properties of the file with an application such as one mentioned here.
A last resort could be to try to rotate the image according to its EXIF property with JS as described here, though that still assumes it has something to do with EXIF.
Whatever it is I think it has something to do with the file and/or its metadata rather than the HTML used to reference it, but since I don't know what other HTML or CSS may be being applied to the tag I may be wrong about that.
Hope that helps!
The link pjrebsch gave pretty much worked. For whatever reason, I also had to add a margin-top value. The code is now:
HTML (added rotate class):
<img class="rotate" src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>
CSS:
.rotate {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
margin-top: 88px;
}
I have one strange bug on my website. When i trying to transform block with text by using
transform: translateY(0px) translate3d(0,0,0) translateZ(0);
i got this block but with black (or white) stripes behind the text. I suppose in depends what background is - light or dark.
I can't attach the screenshot for example, so i leave a link.
Animated blocks - text block that appeared when you scroll the page.
This animation perfectly work in all browsers, but not in Firefox (windows ver.).
Maybe someone saw this and could help...
Thanks!
I solved my problem by setting
outline: 1px solid transparent;
property for each animated block on the page. It was helpful.
I found this solution in this answer.
This might be a result of a bug that I have encountered. There are still quite a few of optimization problems when it comes to transitions, in any browser, but particularly Firefox.
Have you tried setting perspective: 1000; to the parent element? It's served as a quick fix to some of these problems.
Nice website, by the way!
I'm getting an odd redraw issue in chrome:
See the broken right side? This is a div with a single background img.
HTML
<div id="resultsSortFilter>
<!-- ... -->
</div>
CSS
#resultsSortFilter {
float: left;
width: 712px;
height: 109px;
margin: 7px 0 0 8px;
background: url('../images/search_sortfilter_bg.png') no-repeat;
}
No issues in any other browser
Happens on newer versions only, we blocked the update to prevent this causing issues internally.
Seems to be triggered by scrolling up and down before rendering is finished.
Same issues on multiple sites
Has anyone else seen this? Anybody knows what's causing it or what Chrome intends to do about it?
Chrome version 26.0.1410.64 m
Update
The issue is on Windows and Mac OS. In fact seems worse on Mac.
I might have pinned it down further. We get the error on a page that contains lots of large images. I'm wondering if it has to do with the size of the data Chrome has to download?
This appears to make the issue go away (not going to call it a fix):
"It might be that the newer version of Chrome simply does not like
your GPU. I have had issues similar to yours and have solved them by
turning off the compositing and 3D acceleration features.
Type
chrome://flags into the address bar and set the following items:
GPU compositing on all pages: Disabled (Three options in a drop-down.)
Disable accelerated 2D canvas: Enable (Click the link that says
'Enable', the box will turn white.)
Disable accelerated CSS
animations: Enable (Like above, the item will turn white.)
Then click
the button that shows up at the bottom of the page Relaunch now to
restart chrome and test if this worked."
From https://askubuntu.com/questions/167140/google-chrome-with-strange-behavior
Update
The issue seems to be gone in later versions of Chrome.
Chrome is getting buggier. Something worth trying is forcing gpu hardware acceleration on the element.
Add this to the CSS to force hardware acceleration:
-webkit-transform: translate3d(0, 0, 0);
I have had problems with this in webkit browsers, not only Chrome.
I solved it by placing the following rule on my CSS:
html *:not(svg) {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}
This applies hardware acceleration on all elements except for svgs on FF/IE/Safari/Chrome if supported.
I do not apply the transformation on SVG tags since for some reason this was causing my svgs to not render properly, oddly applying this to the elements like rect inside the tag itself causes no problems.
So try to add this rule to your css and see if it solves your problem.
I have had this kind of issue when toggling display:none; display:block;
For example with jQuery.toggle()
The element in question was just a wrapper for the content I wanted to show and hide. So this is its parent which would expand or shrink vertically. It would look like this:
<div class="parent">
<div class="child-to-toggle">
</div>
</div>
child-to-toggle had no styling rules and, when hidden, a part of the parent wasn't redrawn correctly. (the bottom part)
Then, I added a css rule to child-to-toggle and the problem was solved. It looks like adding a css rule will force some redrawing in that case.
Despite the accepted answer, I am adding this one because enabling hardware acceleration on my computer, Macbook pro, OSX Maverick, Chrome 36, would completely mess up the UI with artefacts so I had to find another way.
Adding a css rule might help. In my case I added a border-top to child-to-toggle.
I'm trying to implement a gauge widget for a website. The spec says only HTML/CSS is allowed, so I can't use JavaScript (don't ask me why -- maybe if there's a really simple way of doing it with JavaScript I could persuade the project lead).
So far I have a div with a background image that shows the back of the gauge. Inside this div is an img that is rotated, depending on the gauge value. This value is dynamically injected into the HTML using PHP.
The gauge works fine in Safari/FireFox, but breaks in IE. If I add a border to the image I can see why -- it appears that the IE rotation also includes an automatic translation so that the needle is off-center (see screenshot below).
So, here's the question: how do I shift the needle back to the center of the gauge in IE?
<div style="background: url('genies/gauge.png'); background-repeat: no-repeat; height: 235px; overflow: hidden;">
<img src="genies/gauge-needle.png"
style="-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118655, M12=-0.70710678118655,M21=0.70710678118655, M22=0.70710678118655, sizingMethod='auto expand'); zoom: 1;" />
</div>
The problem here is that the image is rotating about a point that you don't expect it to.
You need to set the transform origin to the centre of your image.
For instance, you would use -moz-transform-origin, -webkit-transform-origin, -o-transform-origin, -ms-transform-origin, -etc-transform-origin...
Check out this page for information on how to deal with the Matrix filter in MSIE:
https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
This is going to be difficult to solve without javascript, if your gauge only moves by a couple of increments (say, 15, 30, 45... deg), you could use this tool:
http://www.useragentman.com/IETransformsTranslator/
and manually pass the margin-left and margin-top values to IE.
Otherwise I'd recommend javascript with CSSSandPaper by the same author. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/.
I found a solution without JS, for IE - see here