I'd like to revisit this similar question from 2012. I wonder if anything has changed from the time that particular question was posted?
Is it possible to create a modal which doesn't require a canvas rendering of the page, which is then displayed and cropped to the desired size?
If so, is there a way to display this cross-browser?
I see that #Michael Wasser mentioned "-webkit-filter" in a previous question. That's how you would do it these days without relying on Javascript.
img {
-webkit-filter: blur(10px);
}
See this HTML5Rocks article for more on this.
How supported is it?
caniuse.com says that global support is at 43.67% at the moment. All the recent Chrome, WebKit (Safari), and Opera (now that it switched to Blink) should have them. Not sure what the plans are for Mozilla and Microsoft.
In Firefox, you can probably use SVG filters to recreate the blur.
Related
I'm using SVG element of HTML5 and it's working on Firefox, Chrome and safari but it's create problem on IE11 you can see the screenshot I attached.
On IE11 browser you can see the sharp edge upper side of puzzles area on other browsers it's smooth.
you can check the code on below mentioned link:
https://jsfiddle.net/agsyhzc1/2/
Please help me how to resolve this issue.
Thanks in Advance
It is should be supported link, but i had simmilar problem, took me a long time to sort it out kinda, I used https://modernizr.com/ to check if svg property was supported if not I ended up doing a fallback with transparent PNG as overlay. It is hack but it is the only solution i came up with. It is relevant for older IE I think that Edge
Chrome used to improperly exclude the scroll bar in its media queries. This means that with 1000px of visible space and a 17px scroll bar, other browsers would report 1017px as a width so far as Media Query is concerned, but webkit browsers (such as Chrome and Safari) did not do this.
These browsers could hit a specific size where a scroll bar would appear in one resolution, then change resolutions to another where it would appear, then it would go back to when it didn't... the solution caused an ugly blank space to appear where the scroll bar should, but it did not. It came out looking like a glitch, and the DOM resize events did not fire properly so it was not something you could react to properly in JS.
However, now in Chrome 29, this appears to have changed. Now they are going off of how the specification works and including the scroll bar in their media query calculations... just like Firefox and Internet Explorer (and how the specification says they should have all along). This fixes the bugs, but causes another problem in that the JS to try to detect the Chrome/Safari issue now will have false positives, because it is not a concern with newer versions of Chrome and I assume eventually Opera and Safari as well.
In light of all of this, I cannot find any information anywhere on when this was fixed in either Chrome or Webkit. I hate having to resort to browser version testing in my JS to work around these flaws, but I am just guessing blindly on Chrome 29+ for the moment as a temporary patch and would love an authoritative answer... I have tested in Safari 6.0.5, but the old method is still being used...
Does anybody know in what version of Chrome and/or Webkit this was fixed?
Chrome is no longer using the webkit engine as of Chrome v. 28 it now uses the Blink Rendering Engine. So no need to be detecting this for chrome unless you need it for previous versions.
For more on Blink: Blink Documnetation
For more on the Release: Next Web Article on Webkit/Blink Switch
I have recently used a JQuery plugin called cycle to create slides of general HTML content in my homepage (www.inspirastudios.com). Everything looked OK in Firefox and Chrome but while browsing the site with a client I got the ugly surprise of Internet Explorer 7 rendering my slides within an ugly gray background. Do you know:
how to solve this, or
any decent javascript slideshow/carousel/slider library that supports general HTML (not only images), previous and next slide activation buttons?
Nivo slider has all the features that you are looking for. http://nivo.dev7studios.com/
You might be facing the following problem: jquery cycle IE7 transparent png problem
Very recently I asked this question on how to pass clicks through an element (e.g. full screen overlaying ). Received some good advice, but I still wondered which browsers supported this natively...
For those skipping the previous link, the overlay is purely cosmetic, must be overlayed and should ignore clicks (all mouse events should pass right through it)...
So far, I've only managed to get this working with WebKit browsers.
Works (Chrome and Safari 4): -
<image src='./images/75/75.overlay.blood.png' width='100%' height='100%'
style='z-index: 3; position: absolute; top: 0; left: 0; pointer-events: none;' />
Firefox is known to support pointer-events with SVGs (and with other HTML elements in 3.6); problem is, I can't seem to get this to work with an SVG (e.g. xlink:href="overlay.24bit.8alpha.png").
Another way I hoped this could be achieved was by using XUL in HTML.
I'm hoping to use the attribute mousethrough="always" on the overlay (<image>, etc). Not working as of yet...
Oddly enough, Internet Explorer treats alpha opacity PNGs transparent areas as "click through" which is handy.
Any other good (or simple yet hackky) ways to achieve this in Firefox (3+). Pondered a Flash overlay with wmode="transparent" (fail).
Try this jQuery solution: http://jsbin.com/uhuto
Works in Firefox, Chrome, iPad's Safari, and IE8 at least. The only issue I saw was that the overlay wasn't translucent in IE, but I assume that's something that can be overcome.
Another solution (used by an Ext JS plugin): http://www.vinylfox.com/forwarding-mouse-events-through-layers/ - uses Javascript to reforward the events.
I want to make a mini timeline with jquery and for this timeline to have a width more than 32767 px. When I change it with jquery $(".timelinecontainer").width(32767); in Opera does not change it, but in others browsers it works.
Can you give me advice on getting it to work in Opera ?
I suspect that Opera keeps the window width as a short and thus is not able to handle values larger than 32767. You should probably change your approach anyway and scale the timeline to fit the current window, then give the ability to zoom in on portions of it. I think your interface will look and work better this way. The way you seem to be doing it, the user will have to do a lot of scrolling to view the timeline and won't ever be able to see it in its entirety.
I'm sure I'll get flamed for saying this but--you could just ignore Opera.
If you like how things look in the other browsers (IE,FF,Safari/Chrome), then I'd say you've got 99% of your bases covered.
You may want to file a bug against Opera, of course. (though I guess it could be jquery--it may have a different code path for Opera). If you could make a simple HTML page to reproduce the problem, you'd know. Then, attach it to the bug report.
This is a very old Opera bug which for some reason they can't resolve. Opera is popular only in some regions and mostly this bug is ignored by the developers.
There is no automated solution for this. As a quick solution you can detect web-browser in your script and limit the width for Opera. As an example - scroll this guitar tab to an end in Opera.
I can confirm that this is indeed a bug in the current Opera versions. The good news is that we're working on fixing it (I work for Opera, so I know what's going on there :)), so in the not too distant future your script should start working as you expect.
I'd actually suggest that if the workaround the first answer above suggests is too hard to implement, you should ignore the problem and wait for the Opera upgrade that fixes it.
This is a bug and it has been fixed in the Opera 12 pre-alphas available from http://my.opera.com/desktopteam
This is definitely a bug with Opera.
Coincidentally, I was seeing it for the first time just yesterday. In my situation I have an inner container with width:9999em and an outer container that uses overflow:hidden and scrollLeft() to create a carousel. In Opera the scrollLeft() stops responding at that width.
File a bug with Opera: https://bugs.opera.com/wizard/
Sounds like an Opera bug to me, too.
Why not take a look at Simile's Timeline project (http://simile.mit.edu/timeline/) and see how they've done it?