I want to display a 3d object in Internet Explorer 10 and 11 (Chrome works as intended).
To make it simple I created a Fiddle with my current status.
I browsed the comments on this website and some others and mainly got the feedback that IE.10 and IE.11 requires the perspective setting in each face definition.
I made another Fiddle trying this, yet the base rotation problem still remains in those two browsers.
Both tries have the problem in a 90deg turn, which are getting displayed white in IE.10 and IE.11.
What do I need to change or improve on the first example to get it running correctly in IE.10 and IE.11?
Related
Hoping someone has seen this before. I'm only hearing about this bug from two users and they're both using tablets (I can get specifics, if it matters) for their workstations (I know...). When they view a website, if a button has a border radius, they see this...
http://www.tiikoni.com/tis/view/?id=69f1996
(i had originally wanted to post the actual image so it wouldn't expire, but I need more reputation - if you visit this page after the link has expired, basically, it shows a green button with rounded corners and a symmetrical white "tearing" across the object, meeting in the center - think green button with white X inside)
They've reported seeing this in Internet Explorer (fully updated) and Firefox.
Any ideas as to what is causing this?
The problem was resolved by rolling back a display driver. There was an odd play between the up to date driver and the docks.
I'm using haxe and openfl to create an html5 application. I tested the app in multiple browsers and devices, all work fine except in Chrome on iOS 7 only. The images used are not appearing seemingly randomly. Every time I re load different images appear and others disappear with exception to a couple that are always there. Here is what I tried:
I tried setting the z-index on the canvas that is used for one of the missing images, as well as a bigger width and height.
I know that the images are being loaded, I used Charles to take a look. There are no errors in the console log and changing the time and place where the images are being added to the display list in haxe changes nothing.
I swapped out one of the images that are always there for an image that is never there and it still didn't load.
The file names had a couple dashes and spaces in them so I changed that as well with no effect.
It's a very strange problem that I can't seem to diagnose. nor can I really find anyone with a similar problem.
The main issue is the fact that I can't see what haxe is building that might be causing this issue.
This is hard to answer without code samples. My advise is to look at what's different about the pictures that stay versus the ones that don't, both in how you're coding and the pictures themselves. I've had problems with images displaying correctly on ios only to find the problem was embedded somewhere in the metadata of an image. Hope this helps.
I have a web application where I need to show a 3D model using webGl in the background then showing different stuff on top of it.
All is working VERY fine in firefox except in chrome where I need to give the canvas a negative value for the z-index rule in CSS.
So I would say I need one of two things:
If I fix this issue giving a negative z-index to the canvas, will this cause any harm on to my application in any of the browsers (in both desktop and mobile)
Could anybody guess why its not working in Chrome (perhaps from a previous experince)
I've asked the question differently a second time and I got my answer, for more details check out here: https://stackoverflow.com/a/19830934/1358670
I'm developing a 'one page' website for a customer.
The website displays as I want it in most browsers however I'm experiencing problems in a specific combination of Internet Explorer 8 installed on Windows XP.
Because of a combination of requirements from the customer and the design of the graphical designer different elements are placed on top of eachother and need to fade in or out based on navigation.
All works fine in browsers like IE9&10 (Including IE8 document property in developer tools), Chrome and also IE8 on Win2K8 server.
However in IE8 it seems like the transparency of invisible elements is inherited by 'would be' visible siblings at the same position.
I've searched for different solutions and have tried different things like:
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-filter: alpha(opacity=0);
also with an additional but mostly unneccesary:
display: block;
or
zoom: 1;
But none of the above does the trick.
Has anyone experienced, or solved, this problem before.
Or is fading multiple elements at the same position in IE8 just not the right way to go.
See this fiddle for my intended functionality:
http://jsfiddle.net/6HZGw/11/
PS. I tried to post an image of what exactly was my problem but since I've just registered this is not possible as a spam prevention measure.
So here is the link to the problem:
http://img338.imageshack.us/img338/4458/ie8f.png
And the link to the expected view:
http://img255.imageshack.us/img255/8391/chromeothers.png
IE8's opacity filter is really awful. It kinda works some of the time, but it's riddled with bugs and gotchas. jQuery makes it slightly less painful, but even then it's easy to get caught out by one of the quirks.
I don't have IE8 or XP available to test it on right now, but I have been down this path myself and suffered similar results, particularly when dealing with multiple elements, and even more particularly when those elements are a mix of text and graphics.
As I say, I can't try it out for myself right now, but my guess is that you've hit one of those problems that just can't be resolved. So I would suggest looking for alternative solutions.
In our case, after a lot of work, we ended up completely abandoning the idea of fading the elements in and out because of this, and switched to a tactic of sliding them out from behind other elements. The effect was similar enough that the customer was happy, and it worked in all browsers.
I've been developing an app specifically for modern browsers and have made very heavy use of the box-shadow property.
Until recently this has been absolutely fine on all supporting browsers. However about a month ago when testing in Chrome I noticed that scrolling was 'extremely' slow, to the point of being almost unusable.
Over the past month I have tried ripping out scripts/messing with my html structure, everything you can think of until finally today I have found the cause.
With box-shadow / webkit-box-shadow disabled on all elements that I had it set for, the problem disappears.
What strikes me as odd is that it worked fine in Chrome until around a month ago. Incidentally the scrolling on the windows version of safari is fine, albeit a little slower than IE/Opera and Firefox.
Is this a known problem? Does anyone have a workaround for this?
And most importantly, is there another method of replicating the same effect without using the CSS3 property?
There was a bug report opened and closed in Webkit last year:
CSS3 box-shadow causes scroll-lag (slow performance) on Safari 5.0.2?
It seems Chrome has an open bug on an older version:
http://code.google.com/p/chromium/issues/detail?id=95164
Airbnb discussed the problem recently, and actually changed their final design because of it:
http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
There's a group of people recently gaining an interest in programmatically testing CSS performance. Here's a bookmarklet you can use to start your own testing:
http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling
In the meantime, you're right that hacking border-image is an option. Check it out here:
Scroll Lag with CSS3 box-shadow property?
It may not be the box-shadow particularly, maybe something else in your app just consumes way too much resource and box-shadow just happens to be the cherry on top.
Nevertheless, I can confirm that box-shadow on overly long or large elements causes performance issues. I work for a certain drag'n'drop form builder and tried setting box-shadow on a 900px x 1000px div and the scrolling started lagging up immediately. Ours is a very ajax heavy web-app, so others might afford to get better results, but still, I think this is a valid example.
So I went old-school and created images instead. I think the most proper way to get image-box shadows working without too much image load is to have an element with a fixed width.
What I did was three image slices. One slice from top to just beneath top corners, one from the bottom to just above the bottom corners and one thin slice from the middle which I used on a div as background image with a repeat-y so that I can dynamically change to divs height fit the users page.
You can slice even more to fit any box but it becomes too much(at least 5 extra images and 8 extra divs to be precise) for a box-shadow imo.