Sometimes the map is blurry when I add my map (same html, css, js) to a different page. The different page may have other html, css and js inside of it. The clear picture on the left is inside a page with added CSS from a third party. The one on the right is without someone else's html, css, and js.
How do I fix this issue?
One thing I noticed when inspecting their details is that the canvas dimensions for the second example is much smaller.
Edit [Fixed!]:
I found the problem looking at the ol.js source. On console, the blurry image has map.frameState_.pixelRatio = 0.89 (defaults to window.devicePixelRatio), while the clear image had map.frameState_.pixelRatio = 1. If I set pixelRatio = 1 when I initialize the map, it fixes the problem:
var map = new ol.Map({pixelRatio: 1, ...});
It turns out that if you your internet browser is zoomed in (eg, to 90%), window.devicePixelRatio will change, which causes the blurriness. However, when you zoom back to 100%, the map is still zoomed until you refresh the page.
This is a well known issue that has not been fixed yet.
I would suggest detecting if the browser has been zoomed and post an alert to the user like - "Hey. The map will suck if you don't have browser zoomed at 100%".
And a little offtopic - if you change the container size and the map if blury, just call map.updateSize() to fix it.
Related
Iframe automatically goes full screen using Ionic 3.9.2 on iOS.
I've tried removing all the fullscreen tags. I notice that it is not happening anywhere else. Only happens on iOS. On other devices, I have to manually make it full screen.
Why does Iframe automatically go full screen on iOS?
<iframe src="https://d1mlukbqb3dh9w.cloudfront.net/PortraitCourse/Module01/Module01Section1/story.html" height="655" width="100%"></iframe>
A while ago I would have been able to provide you with a spot-on answer. Unfortunately I no longer have access to the resources I would need to do so... meaning my answer won't be a complete solution.
IFRAME, on iOS, works slightly differently than on Android. Getting an IFRAME to take only the height you want is not simply a matter of setting the HEIGHT property on the tag as the rendering engine works differently. You'll have to play around with CSS both in the container of the tag and in the contents of the body itself.
Try proceeding as follows:
prepare a mock target page that doesn't take all the height, make
its background red and see how much space it takes
make the mock page longer than the height of the screen by adding lots of text and images to it and observe the change
wrap the IFRAME in a DIV and set the style=height: xxx of the div, as well as its overflow.
wrap the contents of the mock page in a div, setting its height, overflow, position and display style
properties to control its appearance.
repeat step (4) with both the HTML and BODY tags of the mock page.
Playing with these in real-time using Safari to alter their values will prove most useful. It was to me at least, when I had the problem over an year ago.
I have highcharts graphic at my main HTML. I put it in a small div so some parts of graphics is not showed. When user clicks a button it opens at colorbox as a popup however doesn't refresh its size. When I click to inspect with Firebug it suddenly refresh its size and everything is normal. When I close colorbox it it still big and I can not see many part of the graphic too.
Is there any idea about how to refresh Highcharts graphic and why it is refreshing itself(what I want) just when I click inspect element with Firebug?
PS: It works when I resize the windows not related to Firebug. There is something here seems same problem with mine: https://github.com/highslide-software/highcharts.com/issues/472
I called window.resize after data loaded and after colorbox closed, it solved the problem.
Without an example to look at its hard to tell, but here is what I think is happening:
First check if the option reflow is set to true. If it is then Highcharts will monitor window.resize events and redraw itself when a resize occurs. My guess is that when activating Firebug, the window is resized and the chart is redrawn.
If you want to manually set a new size of the chart you can use the api method setSize(). To only redraw the chart you should use redraw().
I just discovered Fabric.js and though the documentation is a lacking a bit, it seems like it will handle everything I need for an HTML-based Dream Board tool I'm building. It appears that it doesn't play well with JQueryUI, though.
When I set any of my objects to be JQueryUI widgets, button, dialog box, etc...the control handles seem to be non responsive on the top half of my canvas items, and even on the bottom, the hit areas for resizing/rotating are greatly reduced, which makes the items hard to manipulate. Has anyone run into this? Is this a known issue? I checked github and have tried to search SO to no avail.
Thank you!
http://seismicdevelopment.com/test/no-jquery-uis.html - No JQuery UI Widgets...behaves how I'd expect.
http://seismicdevelopment.com/test/with-jquery-uis.html - Click 'Add Image', you'll get an image, but compared to the other page, you'll notice that the corners of the image aren't as interactive...you can move the image ok, but rotating and scaling is ver hit-or-miss.
The problem must be in offsets. jQueryUI is probably modifying height of those buttons, which moves canvas slightly down, comparing to how it was during initialization.
I explained this — and why it happens in Fabric — in more detail here.
I've got a site that's using sIFR, and some of the replaced text is being stretched vertically in IE9. It's only happening in places where the text wraps 2 lines, and it fixes itself when I hover my cursor over it. The sIFR text is a link, but I'm not sure if that has any correlation.
I've tried various settings changes like fitExactly, forceClear, and forceSingleLine (though I want it to be able to wrap), and those didn't work. I've tried changing the font-size, line-height, and all other dimensions to px instead of em. innerHTML isn't being used anywhere on the page. It's frustrating that it works after being hovered on, but not before.
And I know you're probably thinking "use cufon or #font-face, dummy" but I'm stuck with sIFR for now. The client wants what the client wants...
I've found a solution,
if you try to hover with mouse cursor the text will display correct so..
I write few line of code to put in sifr-config.js
forcing flash reset "onReplacemment" callback only when IE9 is detected
you must use Jquery for browser detection or use another javascript way
see the link below:
http://www.voo-doo.net/robotphobia/2011/05/fix-sifr-ie9
I just recently upgraded to 436 from 419, and have found that fitExactly will no longer have any effect.
You can see an example here:
(With 419)
(With 436)
The javascript config is in the page head.
I checked the versions in between, and the latest it works with is 419.
I could adjust the width in the Javascript configuration, but then there would be a gap left on the side of the dropcap I'm using it on, and the fact that I'm integrating it with a Wordpress theme that automatically applies sifr (other than the one in the example), meaning that each can't be adjusted by changing the width or font size.
I would much prefer to use 436, especially due to there being less page shifting, so, is there a remedy?
Thanks for your time.
If you compare the width and height of the Flash movie on both pages, you'll see that it's the same. In other words, it looks like fitExactly works fine. I wouldn't know though why Flash is clipping the rendered text.
Just to test, could you open the r436 JavaScript file, search for '419' and replace by '436', and then use the r419 Flash movie? Perhaps that provides further clues.