I have a problem with 3D-Transforms on Images.
For example:
transform: rotateY(60deg);
It works fine everywhere except Firefox on Windows XP. The image is displayed jagged there (no anti-aliasing?). It looks nice with Safari, Chrome and with Firefox on Windows 7 and Mac OS X. Also tested different versions of Firefox with no other results.
I couldn't find any description or solution of the same problem. Some write that giving a (transparent) border/outline helps to improve the edges but it doesn't help inside the image.
I made a fiddle here: http://jsfiddle.net/8Tx6X/4/
Here is how it looks in Firefox 16.0.1 on Windows 7 (and other browsers) compared to Firefox 16.0.1 on Windows XP:
http://i.stack.imgur.com/NePyd.png
Anyone experienced the same behaviour?
Could it be a problem with hardware/software-rendering?
(I tested on XP with a virtual machine and an old laptop)
I would love to find a hack or at least a way to detect if it is displayed correctly.
Some more investigation brought me a little bit further. It's not a problem with Windows XP as I thought first. The problem occurs if Firefox doesn't use hardware acceleration. When I turn that off (in Options -> Advanced -> General -> Use hardware acceleration when available), it looks jagged on Windows 7 too. I also tested on another computer with WinXP where the image looks fine. You can see if Firefox is using hardware acceleration when you type in "about:support" and look for "WebGL Renderer" and "GPU Accelerated Windows".
So I guess Firefox's software renderer can't do any better right now.
What I do now is detect if WebGL is activated and therefore hardware acceleration is available. This is the code I use (it's from an old version of Modernizr):
try {
var canvas = document.createElement('canvas'),ret;
ret = !!(window.WebGLRenderingContext && (canvas.getContext('experimental-webgl') || canvas.getContext('webgl')));
canvas = undefined;
} catch (e){
ret = false;
}
return ret;
If the test passes I serve CSS-3D-Transforms. Otherwise the user sees a flash fallback.
I am experiencing the same issue, with Firefox on Windows 7. As you say the edges can be fixed but the content, (I have not used an image, but absolutely positioned HTML elements) looks terrible, but in Chrome and Safari they are fine.
Related
I would like to ask about these images I found to be glitchy on google chrome.
I must confirm that none of these are intentional.
This started since I saw a glitchy image on my google classroom, here are some images I found to be glitchy. I don't seems to find a pattern from them.
Glitchy image on google classroom
How the google classroom image should look like (my friend's perspective)
Broken logos of chrome extensions (fullscreen)
Broken search icon
Broken pdf icon on web.whatsapp.com
It sometimes manages to fix itself though, I successfully took a screenshot of glitchy icons and the normal ones.
Search Icons, both normal and glitchy displayed at the same time
I've tried to delete images cache and even reinstalled chrome, none of them works to fix this problem.
Some information that might help narrow down the problem:
I've recently used this PC with a new SSD (I've used it for about a month now), which contains the chrome itself, and it works properly so far. I don't think this should be a problem with the disk. (please correct me if I'm wrong)
However, on the day this happens, I installed the React Devtool (I've deleted it though) (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and the Redux Devtools (https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
Can this problem be a bug on the chrome itself, or perhaps something related with skia? Should I report this as a problem to Chrome, or is this a problem on my end?
Information about my OS and Google Chrome (I'll provide more if it is required):
OS:
Edition: Windows 10 Pro
Version: 20H2
Installed on: 1/10/2022
OS build: 19042.1526
Experience: Windows Feature Experience Pack 120.2212.4170.0
Chrome:
Version: 98.0.4758.102 (Official Build) (64-bit)
Thanks
EDIT: Fixed, I changed from using GPU 0 to GPU 1 via settings, is this a graphics card compatibility issue?
GPU 0: Intel(R) HD Graphics 530
GPU 1: NVIDIA GeForce GTX 950M
Setting "Choose ANGLE graphics backend" (chrome flag) to "OpenGL" fixed the issue for me.
Our company uses Macbook Pros as dev machines with external monitors.
Recently Chrome 53 started displaying the wrong colours in a PHP/Javascript web app when displayed on an external monitor.
The colour issue does not occur if Chrome is dragged to the internal MacBook Pro screen.
The colour issue does not occur in Safari, Opera or Firefox.
This is happening on 2 notebooks.
Does anyone have a hint as to the cause or potential solution?
I found a link to a problem where Chrome made the screen black on Windows 10 and thought it may be related.
The suggested solution was to disable hardware acceleration in Chrome Advanced settings.
I tried this and it worked - colours have returned to normal.
I still feel this is a Chrome defect, but at least the colours on the external monitor are distinguishable.
I have a strange issue whit my emulate touch functionality on Google Chrome version 49.0.2623.110 m.
I'm using laptop + monitor (both Dell) and running Windows 8.
The issue is that while Chrome is on my secondary monitor and touch screen emulation is enabled I cannot see a touch screen pointer (black circle) nor any kind of pointer, but when I move my Chrome to my main laptop display it would show. I tried disabling laptop display while using external monitor and it is the same, I cannot see the pointer. This was not a problem with previous Chrome version.
Did anyone had similar issues with this version?
Thank you
EDIT:
I've change the laptop, updated to win10 and updated Chrome to 50.0.2661.87 m version and I still have the same issue (colleague of mine has the same problem as well).
A colleague of mine "solved" the problem by enabling Windows' Mouse pointer trails at minimum length. I find it too annoying to work with the setting enable, but it does work if you really need it.
Mouse settings
They did some changes in recent version of Dev Tools and some options are now gone. Ensure you have "Mobile" or "Desktop with touch" selected, as you can see on the screenshot.
Here's the gist: we have an Air app that displays bitmaps at full screen, original size and scaled. On the Mac, these bitmaps look great (antialiased and smooth). On Windows (regardless of machine), they look pixelated and terrible.
We've updated Air and it still looks bad under the latest Air build. Is there something that we can do programmatically to fix this, or is there a platform issue that we don't know about?
Did you try to set the Smooth parameter as true?
var YOUR_BITMAP_OBJECT = Bitmap(YOUR_BITMAPDATA_OBJECT);
YOUR_BITMAP_OBJECT.smoothing = true;
Also be sure the export has the correct compression (recomendable more than 80%).
Check the resolution diference in Windows versus Mac, maybe in Windows it's higher.
What is your current render mode? i suggest to set render mode to CPU.
I have an area of a website that has a few broken images; however it is only in a few different situations.
Where it works
Windows 7 (all 64 bit) - Chrome, Firefox, IE7, IE8, IE9
Windows XP - Firefox, Chrome
Where it doesn't work
Windows XP - IE8, IE7
If I look in the source on the Windows XP/IE combinations, the generated source looks fine. However, if I paste the URL of the image into the address bar, sure enough it can't find it despite it being there. If I copy and paste the same URL into one of the other browsers, it finds it just fine. Cross browser quirks is something we are all familiar with, but an image not being found but only in certain hardware/software combos is certainly a new one for me.
I know this question is 3 years old, and the images are no longer there, but anyone investigating this problem may have some luck with this answer:
Some images won't display in IE7 or IE8
Short version: the images are CMYK compressed rather than RGB; apparently it can be fixed by opening in irfanview and re-saving it, or something similar in photoshop.